/* ==========================================================================
   OPENX 闂?site stylesheet
   Magazine-style 闁?single accent (coral) 闁?restrained palette 闁?real type
   ========================================================================== */

/* ----- tokens ----------------------------------------------------------- */
:root{
  --ink:           #181E25;
  --ink-2:         #2C333D;
  --ink-3:         #4C5560;
  --ink-4:         #808890;
  --paper:         #FFFFFF;
  --paper-2:       #FAFAFA;
  --line:          #E5E1D8;
  --line-2:        #DCD7CC;
  --dark:          #0E1116;
  --dark-2:        #15191F;

  --coral:         #FF276F;
  --coral-2:       #FF7038;
  --g-coral:       linear-gradient(to right, var(--coral), var(--coral-2));

  --font-display:  "Outfit","DM Sans",system-ui,-apple-system,sans-serif;
  --font-body:     "DM Sans","Outfit",system-ui,-apple-system,sans-serif;
  --font-mono:     "JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-serif:    "Libre Baskerville",Georgia,"Times New Roman",serif;

  --max:           1240px;
  --pad:           60px;
  --r-sm:          6px;
  --r-md:          12px;
  --r-lg:          18px;
  --header-h:      68px;

  --ease:          cubic-bezier(.2,.7,.2,1);
}

/* ----- reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
em{ font-style:normal; }
::selection{ background:var(--coral); color:#fff; }

/* ----- shared layout ---------------------------------------------------- */
.section-head{
  max-width:840px;
  margin:0 auto 64px;
  text-align:center;
}
.section-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:24px;
  position:relative;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--paper-2);
}
.section-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(34px,4.4vw,60px);
  line-height:1.05;
  letter-spacing:-0.035em;
  color:var(--ink);
}
.section-title .hl-ink{
  background-image:var(--g-coral);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-style:italic;
  font-family:var(--font-serif);
  font-weight:400;
  padding-right:4px;
}
.section-sub{
  margin-top:20px;
  font-size:17px;
  color:var(--ink-3);
  line-height:1.6;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* ==========================================================================
   HEADER
========================================================================== */
.header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  z-index:100;
  background:rgba(255,255,255,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.header.is-scrolled{
  background:rgba(255,255,255,0.92);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,0.02),0 24px 40px -28px rgba(24,30,37,.12);
}
.header-inner{
  max-width:var(--max);
  height:100%;
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:48px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.brand-mark{
  width:24px; height:24px;
  transition:transform .4s var(--ease);
}
.brand:hover .brand-mark{ transform:rotate(-6deg) scale(1.06); }
.brand-pulse{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--coral);
  margin-left:-2px;
  box-shadow:0 0 0 0 rgba(255,39,111,.55);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,39,111,.55); }
  70%  { box-shadow:0 0 0 8px rgba(255,39,111,0); }
  100% { box-shadow:0 0 0 0 rgba(255,39,111,0); }
}
.nav{
  display:flex;
  align-items:center;
  gap:36px;
  justify-self:start;
  margin-left:24px;
}
.nav-link{
  font-size:14px;
  color:var(--ink-2);
  position:relative;
  padding:6px 0;
  transition:color .2s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1.5px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ transform:scaleX(1); }
.header-cta{
  display:flex;
  align-items:center;
  gap:20px;
}
.header-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.meta-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#1AB864;
  box-shadow:0 0 0 3px rgba(26,184,100,.18);
}

/* ----- pill buttons ----------------------------------------------------- */
.btn-pill-dark,
.btn-pill-outline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 22px;
  border-radius:100px;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.005em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn-pill-dark{
  background:var(--ink);
  color:#fff;
  box-shadow:0 6px 20px -10px rgba(24,30,37,.5);
}
.btn-pill-dark::before{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .8s var(--ease);
}
.btn-pill-dark:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px -14px rgba(24,30,37,.55);
}
.btn-pill-dark:hover::before{ left:130%; }
.btn-pill-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-2);
}
.btn-pill-outline:hover{
  background:var(--paper-2);
  border-color:var(--ink-3);
}
.btn-arrow{
  display:inline-block;
  width:14px; height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 6l6 6-6 6' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 6l6 6-6 6' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  transition:transform .3s var(--ease);
}
.btn-pill-dark:hover .btn-arrow,
.btn-pill-outline:hover .btn-arrow{ transform:translateX(3px); }

/* ==========================================================================
   HERO
========================================================================== */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 80px) var(--pad) 120px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  --mx:50%;
  --my:50%;
}
.hero-mesh{ display:none; }
.hero-mesh-1{
  background:radial-gradient(circle,#FFD7C9 0%,transparent 60%);
  top:-260px; left:-200px;
  animation:orbit1 24s ease-in-out infinite;
}
.hero-mesh-2{
  background:radial-gradient(circle,#E9D8FF 0%,transparent 60%);
  top:-100px; right:-260px;
  animation:orbit2 28s ease-in-out infinite;
}
.hero-mesh-3{
  background:radial-gradient(circle,#D2EEFF 0%,transparent 60%);
  bottom:-340px; left:30%;
  animation:orbit3 32s ease-in-out infinite;
}
@keyframes orbit1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(80px,60px) scale(1.08); }
}
@keyframes orbit2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-90px,40px) scale(.95); }
}
@keyframes orbit3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(60px,-60px) scale(1.1); }
}
.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(24,30,37,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24,30,37,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);
  animation:gridShift 18s linear infinite;
}
@keyframes gridShift{
  from{ background-position:0 0; }
  to  { background-position:64px 64px; }
}
.hero-spot{
  position:absolute;
  left:var(--mx); top:var(--my);
  width:680px; height:680px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,236,224,.7) 0%,transparent 60%);
  opacity:.6;
  transition:opacity .4s var(--ease);
  mix-blend-mode:multiply;
}
.hero-particle{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--ink);
  opacity:.35;
}
.hp-1{ top:18%; left:12%; animation:float 14s ease-in-out infinite; }
.hp-2{ top:32%; left:78%; animation:float 18s ease-in-out infinite -3s; }
.hp-3{ top:62%; left:24%; animation:float 16s ease-in-out infinite -7s; }
.hp-4{ top:74%; left:84%; animation:float 20s ease-in-out infinite -2s; }
.hp-5{ top:42%; left:8%;  animation:float 17s ease-in-out infinite -9s; }
.hp-6{ top:8%;  left:50%; animation:float 22s ease-in-out infinite -5s; }
.hp-7{ top:88%; left:62%; animation:float 15s ease-in-out infinite -4s; }
.hp-8{ top:54%; left:90%; animation:float 19s ease-in-out infinite -10s; }
@keyframes float{
  0%,100%{ transform:translate(0,0); opacity:.25; }
  50%    { transform:translate(8px,-22px); opacity:.6; }
}

.hero-inner{
  position:relative;
  max-width:1040px;
  margin:0 auto;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:100px;
  margin-bottom:36px;
}
.eyebrow-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#1AB864;
  box-shadow:0 0 8px rgba(26,184,100,.6);
}
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(72px,11vw,176px);
  line-height:.92;
  letter-spacing:-0.05em;
  color:var(--ink);
  margin:0 0 24px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:0;
  flex-wrap:nowrap;
}
.ht-row{
  display:inline-flex;
  align-items:baseline;
  overflow:hidden;
}
.ht-letter{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
  animation:letterUp .9s var(--ease) forwards;
}
.ht-letter:nth-child(1){ animation-delay:.05s; }
.ht-letter:nth-child(2){ animation-delay:.12s; }
.ht-letter:nth-child(3){ animation-delay:.19s; }
.ht-letter:nth-child(4){ animation-delay:.26s; }
@keyframes letterUp{
  to{ opacity:1; transform:translateY(0); }
}
.ht-x{
  display:inline-block;
  background-image:var(--g-coral);
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:600;
  font-size:1.05em;
  opacity:0;
  transform:translateY(40px);
  animation:letterUp .9s var(--ease) .34s forwards, xShift 6s ease-in-out 1.5s infinite;
}
@keyframes xShift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
.hero-tagline{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px,2.4vw,30px);
  color:var(--ink-2);
  margin:8px 0 24px;
  letter-spacing:-0.01em;
}
.hero-tagline .hl{
  font-style:italic;
  font-family:var(--font-display);
  font-weight:600;
  background-image:var(--g-coral);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-subtitle{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-3);
  max-width:640px;
  margin:0 auto 44px;
}
.hero-cta-row{
  display:inline-flex;
  gap:14px;
  margin-bottom:80px;
}
.hero-trust{
  display:inline-flex;
  align-items:center;
  gap:32px;
  padding:18px 28px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.trust-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.trust-k{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-4);
}
.trust-v{
  font-size:13px;
  color:var(--ink);
  font-weight:500;
}
.trust-divider{
  width:1px; height:28px;
  background:var(--line);
}

/* ==========================================================================
   FEATURES  (3 cards)
========================================================================== */
.features{
  padding:120px var(--pad);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.feature-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px;
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  position:relative;
}
.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 50px -32px rgba(24,30,37,.18);
  border-color:var(--line-2);
}
.feature-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.feature-num{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-4);
  letter-spacing:.08em;
}
.feature-tag{
  font-family:var(--font-display);
  font-weight:500;
  font-size:14px;
  color:var(--ink);
}
.feature-arrow{
  margin-left:auto;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  border:1px solid var(--line);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.feature-card:hover .feature-arrow{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  transform:rotate(-45deg);
}
.feature-img{
  height:280px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--dark);
  position:relative;
  display:flex;
  flex-direction:column;
}
.feature-img::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:4px 4px;
  pointer-events:none;
  opacity:.6;
}
.feature-body{
  padding:24px 4px 4px;
}
.feature-h{
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:8px;
}
.feature-p{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-3);
}

/* dark editor mock (card 01) */
.mock-editor{
  display:flex;
  flex-direction:column;
  flex:1;
  background:var(--dark);
  color:#E1E5EA;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
}
.mock-editor-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:#181B21;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.mock-editor-bar > span:nth-child(-n+3){
  width:9px; height:9px; border-radius:50%;
  background:#3A3F48;
}
.mock-editor-bar > span:nth-child(1){ background:#FF5F57; }
.mock-editor-bar > span:nth-child(2){ background:#FEBC2E; }
.mock-editor-bar > span:nth-child(3){ background:#28C840; }
.mock-editor-tab{
  margin-left:10px;
  font-size:10.5px;
  color:#7A828D;
  background:#222730;
  padding:3px 10px;
  border-radius:4px;
}
.mock-editor-body{ padding:14px 16px; flex:1; overflow:hidden; }
.mock-editor-body .line{ display:flex; gap:14px; }
.mock-editor-body .ln{ color:#4A505B; width:18px; text-align:right; flex-shrink:0; }
.mock-editor-body .tk-k{ color:#FF8FAD; }
.mock-editor-body .tk-s{ color:#A6E3A1; }
.mock-editor-body .tk-c{ color:#6B7280; font-style:italic; }
.mock-editor-body .cursor{ color:var(--coral); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* dark context mock (card 02) */
.mock-context{
  flex:1; display:flex; flex-direction:column;
  background:var(--dark);
  color:#C9CFD8;
  font-family:var(--font-mono);
  font-size:11.5px;
  padding:18px 18px 0;
}
.ctx-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ctx-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#6B7280;
}
.ctx-count{ font-size:11px; color:var(--coral); }
.ctx-bar{
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.ctx-bar > span{
  position:absolute; left:0; top:0; bottom:0;
  background:var(--g-coral);
  border-radius:2px;
}
.ctx-cursor{
  position:absolute; left:84%; top:-3px; bottom:-3px;
  width:1.5px;
  background:#fff;
  box-shadow:0 0 8px #fff;
  animation:blink 1.1s steps(2) infinite;
}
.ctx-tree{ line-height:1.85; font-size:11px; padding-bottom:18px; }
.ctx-tree .ic{ display:inline-block; width:14px; color:#6B7280; }
.ctx-tree .l2{ padding-left:14px; color:#A1A8B3; }
.ctx-tree .l3{ padding-left:28px; color:#7A828D; }
.ctx-tree .ctx-more{ padding-left:14px; color:#4A505B; font-style:italic; }

/* dark local mock (card 03) */
.mock-local{
  flex:1;
  background:var(--dark);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  color:#E1E5EA;
}
.mock-local-top{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mock-local-shield{
  width:36px; height:36px;
  background:rgba(26,184,100,.12);
  color:#1AB864;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.mock-local-shield svg{ width:18px; height:18px; }
.mock-local-title .t1{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:#1AB864;
}
.mock-local-title .t2{ font-size:14px; color:#E1E5EA; margin-top:2px; }
.mock-local-rows{ display:flex; flex-direction:column; gap:8px; }
.mock-local-rows .row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:rgba(255,255,255,.03);
  border-radius:8px;
  font-size:11.5px;
}
.mock-local-rows .dot{
  width:6px; height:6px; border-radius:50%; background:#6B7280;
}
.mock-local-rows .dot.ok{ background:#1AB864; box-shadow:0 0 6px rgba(26,184,100,.6); }
.mock-local-rows .lbl{ color:#A1A8B3; }
.mock-local-rows .val{ margin-left:auto; color:#E1E5EA; font-family:var(--font-mono); font-size:10.5px; }

/* ==========================================================================
   PRODUCTS  (4 cards)
========================================================================== */
.products{
  padding:120px var(--pad);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.product-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 36px 60px -36px rgba(24,30,37,.22);
}
.pmock{
  background:var(--dark);
  color:#E1E5EA;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  position:relative;
  isolation:isolate;
  min-height:220px;
}
.pmock::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:4px 4px;
  pointer-events:none;
  opacity:.55;
}
.pmock-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:11px 14px;
  background:#181B21;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.pmock-bar > .dot-r,.pmock-bar > .dot-y,.pmock-bar > .dot-g{
  width:9px; height:9px; border-radius:50%;
}
.dot-r{ background:#FF5F57; }
.dot-y{ background:#FEBC2E; }
.dot-g{ background:#28C840; }
.pmock-tab{
  margin-left:10px;
  font-size:10.5px;
  color:#7A828D;
}
.pmock-status{
  margin-left:auto;
  font-size:10px;
  color:#1AB864;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dot-mini{ width:5px; height:5px; border-radius:50%; background:#1AB864; box-shadow:0 0 6px rgba(26,184,100,.6); }
.pmock-body{ padding:18px 20px; }
.pmock-body .prompt{ color:var(--coral); margin-right:6px; }
.pmock-body .arg{ color:#A6E3A1; }
.pmock-body .out{ color:#7A828D; font-size:10.5px; }
.pmock-body .out .hl{ color:#E1E5EA; }
.pmock-body .out .ok{ color:#1AB864; }
.pmock-body .cursor{ color:var(--coral); animation:blink 1s steps(2) infinite; }

.pmock-urlbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#181B21;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:10.5px;
  color:#7A828D;
}
.pmock-url-ic{ color:#6B7280; }
.pmock-url{ color:#A1A8B3; }
.pmock-ide{ display:grid; grid-template-columns:120px 1fr; gap:0; padding:0; }
.ide-side{ background:#15181E; padding:14px 12px; border-right:1px solid rgba(255,255,255,.04); }
.ide-head{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6B7280;
  margin-bottom:8px;
}
.ide-row{
  font-size:10.5px;
  color:#7A828D;
  padding:3px 0;
  display:flex;
  gap:6px;
  align-items:center;
}
.ide-row .ic{ color:#4A505B; }
.ide-row.openx.ts{ color:#E1E5EA; background:rgba(255,255,255,.04); margin:0 -12px; padding:3px 12px; }
.ide-main{ padding:14px 18px; }
.ide-main .k{ color:#FF8FAD; }
.ide-main .s{ color:#A6E3A1; }

.pmock-chat{ display:flex; flex-direction:column; gap:10px; }
.chat-msg{
  padding:8px 12px;
  border-radius:10px;
  font-size:11px;
  max-width:90%;
  line-height:1.55;
}
.chat-msg em{ color:var(--coral); font-style:normal; }
.chat-msg.user{
  background:rgba(255,255,255,.06);
  color:#C9CFD8;
  align-self:flex-start;
}
.chat-msg.agent{
  background:rgba(255,39,111,.12);
  color:#E1E5EA;
  align-self:flex-end;
  border:1px solid rgba(255,39,111,.2);
}

.pmock-code .k{ color:#FF8FAD; }
.pmock-code .s{ color:#A6E3A1; }
.pmock-code .c{ color:#6B7280; font-style:italic; }
.pmock-code .f{ color:#82C8FF; }

.product-foot{
  padding:28px 28px 32px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.product-meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-4);
}
.product-cat{ color:var(--ink); }
.product-stage{
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:100px;
}
.product-h{
  font-family:var(--font-display);
  font-weight:500;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-0.025em;
  color:var(--ink);
}
.product-p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-3);
}
.product-link{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink);
  font-weight:500;
  padding-top:8px;
}
.product-arrow{ transition:transform .3s var(--ease); }
.product-card:hover .product-arrow{ transform:translateX(4px); }

/* ==========================================================================
   ABOUT  (magazine)
========================================================================== */
.about{
  padding:140px var(--pad);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.about-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:380px 1fr;
  gap:80px;
  align-items:start;
}
.about-side{
  position:sticky;
  top:calc(var(--header-h) + 32px);
  display:flex;
  flex-direction:column;
  gap:24px;
}
.about-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.about-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral); }
.about-eyebrow-line{
  width:48px; height:1px; background:var(--line-2);
}
.about-eyebrow-meta{ color:var(--ink-4); }
.about-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
}
.about-brand-mark{ width:24px; height:24px; }
.about-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px,2.6vw,36px);
  line-height:1.2;
  letter-spacing:-0.025em;
  color:var(--ink);
}
.about-title .at-line{ display:block; }
.about-title .hl{
  font-style:italic;
  font-family:var(--font-serif);
  font-weight:400;
  background-image:var(--g-coral);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about-tag{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--ink-3);
  font-size:16px;
  padding-top:8px;
  border-top:1px solid var(--line);
  margin-top:8px;
}
.about-meta{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:8px;
}
.meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.meta-row dt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--ink-4); text-transform:uppercase; }
.meta-row dd{ color:var(--ink); font-weight:500; }
.about-cta{ align-self:flex-start; margin-top:8px; }

.about-main{ display:flex; flex-direction:column; gap:36px; }
.about-quote{ position:relative; padding-left:36px; }
.about-quote .quote-mark{
  position:absolute;
  left:0; top:-20px;
  font-family:var(--font-serif);
  font-size:96px;
  line-height:1;
  color:var(--coral);
  font-weight:400;
}
.quote-text{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.35;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.about-p{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  max-width:640px;
}
.about-p em{
  font-style:italic;
  font-family:var(--font-serif);
  font-weight:400;
  background-image:var(--g-coral);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about-p strong{ font-weight:600; color:var(--ink); }

.about-stats{
  display:grid;
  grid-template-columns:repeat(7,auto);
  align-items:stretch;
  gap:0;
  margin-top:24px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 24px;
}
.stat-num{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(40px,4vw,56px);
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--ink);
}
.stat:nth-child(7) .stat-num{
  background-image:var(--g-coral);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-style:italic;
  font-family:var(--font-serif);
}
.stat-lbl{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
}
.stat-sub{
  font-size:11.5px;
  color:var(--ink-3);
  line-height:1.4;
  margin-top:2px;
}
.stat-sep{
  width:1px;
  background:var(--line);
  align-self:stretch;
}

/* ==========================================================================
   FOOTER
========================================================================== */
.footer{
  background:var(--ink);
  color:#C9CFD8;
  padding:80px var(--pad) 0;
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 2fr;
  gap:80px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand .brand{ color:#fff; }
.footer-tag{
  margin-top:16px;
  font-size:14px;
  color:#9DA5B0;
  max-width:340px;
  line-height:1.6;
}
.footer-domain{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12px;
  color:#FF8FAD;
  letter-spacing:.06em;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{
  font-size:13.5px;
  color:#9DA5B0;
  transition:color .2s var(--ease);
}
.footer-col a:hover{ color:#fff; }
.footer-h{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6B7280;
  margin-bottom:10px;
}
.footer-base{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#6B7280;
  font-family:var(--font-mono);
  letter-spacing:.04em;
}

/* ==========================================================================
   RESPONSIVE
========================================================================== */
@media (max-width:1100px){
  .feature-grid{ grid-template-columns:1fr 1fr; }
  .feature-card:nth-child(3){ grid-column:1/-1; }
  .product-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; gap:48px; }
  .about-side{ position:static; }
  .footer-inner{ grid-template-columns:1fr; gap:48px; }
  .about-stats{ grid-template-columns:repeat(3,1fr); }
  .stat-sep:nth-child(2n){ display:none; }
}
@media (max-width:760px){
  :root{ --pad:24px; --header-h:64px; }
  .header-inner{ grid-template-columns:auto 1fr auto; gap:16px; }
  .nav{ display:none; }
  .header-meta{ display:none; }
  .hero{ padding-top:calc(var(--header-h) + 48px); padding-bottom:80px; }
  .hero-cta-row{ flex-direction:column; width:100%; }
  .hero-cta-row a{ justify-content:center; }
  .hero-trust{ flex-direction:column; gap:12px; align-items:stretch; }
  .trust-divider{ display:none; }
  .feature-grid{ grid-template-columns:1fr; }
  .feature-card:nth-child(3){ grid-column:auto; }
  .features,.products,.about{ padding:80px var(--pad); }
  .about-stats{ grid-template-columns:1fr 1fr; gap:24px; }
  .stat-sep{ display:none; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:24px; }
}