/* ============================================
   DEVRON TECHNOLOGIES: DESIGN TOKENS
   ============================================ */
:root{
  --bg:            #0a0908;
  --bg-alt:        #0e0d0b;
  --panel:         #14130f;
  --panel-2:       #1a1814;
  --border:        #2a271f;
  --border-soft:   #201e18;
  --text:          #f3efe4;
  --text-dim:      #9c9689;
  --text-faint:    #646055;
  --accent:        #cc9a3d;
  --accent-strong: #e8b654;
  --accent-glow:   rgba(204, 154, 61, .28);

  /* department color system: each discipline carries its own signal color, drawn from a technical-drafting palette */
  --c-software:      #5b7fd6;
  --c-software-soft: rgba(91,127,214,.20);
  --c-ai:             #9d6fd8;
  --c-ai-soft:        rgba(157,111,216,.20);
  --c-iot:            #2fb894;
  --c-iot-soft:       rgba(47,184,148,.20);
  --c-auto:           #cf6a35;
  --c-auto-soft:      rgba(207,106,53,.20);

  --font-display: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --container: 1180px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-3d: cubic-bezier(.2,.9,.25,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}
html:not(.js) [data-reveal]{ opacity: 1 !important; transform: none !important; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:700; letter-spacing:-0.02em; font-optical-sizing: auto; text-wrap: balance; }
p{ margin:0; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.grid-overlay{
  position: fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(204,154,61,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,154,61,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
}

/* ============================================
   GRAIN: cinematic film-grain texture, the kind of
   quiet imperfection premium sites use instead of flat color
   ============================================ */
.grain{
  position: fixed; inset:-10%; z-index: 3; pointer-events:none; opacity:.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{ 0%{ transform: translate(0,0); } 33%{ transform: translate(-1%,1%); } 66%{ transform: translate(1%,-1%); } 100%{ transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* ============================================
   CUSTOM CURSOR: a quiet, precise dot + trailing ring,
   desktop/hover-capable devices only
   ============================================ */
@media (hover: hover) and (pointer: fine){
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor: none; }
  .cursor-dot, .cursor-ring{ position: fixed; top:0; left:0; z-index: 900; pointer-events:none; border-radius:50%; will-change: transform; }
  .cursor-dot{ width:6px; height:6px; background: var(--accent-strong); transform: translate(-50%,-50%); }
  .cursor-ring{ width:36px; height:36px; border: 1px solid var(--accent); opacity:.55; transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s var(--ease), border-color .25s var(--ease); }
  .cursor-ring.is-active{ width:56px; height:56px; opacity:.9; border-color: var(--accent-strong); }
}

/* ============================================
   MAGNETIC BUTTONS + TILT CARDS: subtle, cursor-reactive
   micro-motion for a more tactile, premium feel
   ============================================ */
.magnetic{ transition: transform .35s var(--ease-3d); will-change: transform; }
.tilt-card:hover{ transition: transform .12s linear, border-color .4s var(--ease), box-shadow .5s var(--ease-3d), background .3s var(--ease); }

/* ============================================
   AMBIENT FIELD: a single quiet light source rather than
   a multicolor blur, closer to a studio drafting lamp
   ============================================ */
.aurora{
  position: fixed; inset: -10%; z-index: 0; pointer-events:none;
  overflow: hidden; filter: blur(90px); opacity: .3;
  transform: translateY(var(--parallax-y, 0px));
}
.aurora span{
  position:absolute; width:44vw; height:44vw; min-width:340px; min-height:340px;
  border-radius:50%; mix-blend-mode: soft-light; will-change: transform;
}
.aurora span:nth-child(1){ background: var(--accent); top:-16%; left:-8%; opacity:.9; animation: auroraA 30s ease-in-out infinite; }
.aurora span:nth-child(2){ background: var(--c-software); top:8%; right:-18%; opacity:.5; animation: auroraB 34s ease-in-out infinite; }
.aurora span:nth-child(3){ background: var(--c-iot); bottom:-20%; left:20%; opacity:.35; animation: auroraC 38s ease-in-out infinite; }
.aurora span:nth-child(4){ background: var(--c-auto); bottom:-16%; right:4%; opacity:.4; animation: auroraD 32s ease-in-out infinite; }
@keyframes auroraA{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6vw,5vh) scale(1.1); } }
@keyframes auroraB{ 0%,100%{ transform: translate(0,0) scale(1.02); } 50%{ transform: translate(-5vw,6vh) scale(.94); } }
@keyframes auroraC{ 0%,100%{ transform: translate(0,0) scale(.96); } 50%{ transform: translate(4vw,-5vh) scale(1.08); } }
@keyframes auroraD{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-5vw,-4vh) scale(1.05); } }

/* ============================================
   CORNER FRAME: signature engineering-drawing mark,
   used to frame screenshots throughout the site
   ============================================ */
.corner-frame{ position:relative; }
.corner-frame::before,
.corner-frame::after{
  content:''; position:absolute; width:16px; height:16px; pointer-events:none; z-index:2;
  transition: width .3s var(--ease), height .3s var(--ease);
}
.corner-frame::before{ top:8px; left:8px; border-top:1.5px solid var(--accent); border-left:1.5px solid var(--accent); opacity:.85; }
.corner-frame::after{ bottom:8px; right:8px; border-bottom:1.5px solid var(--accent); border-right:1.5px solid var(--accent); opacity:.85; }
.corner-frame:hover::before,
.corner-frame:hover::after{ width:22px; height:22px; }

.eyebrow{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); display:flex; align-items:center; gap:8px; margin-bottom: 20px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow: 0 0 10px 2px var(--accent-glow); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.7); } }
.eyebrow-light{ color: var(--text-dim); }
.hero-inner .eyebrow{
  display:inline-flex; margin: 0 auto 28px; padding: 8px 18px 8px 14px; border-radius: 100px;
  border: 1px solid var(--border); background: rgba(243,239,228,.03); backdrop-filter: blur(6px);
}

/* ============================================
   NAV
   ============================================ */
.nav{ position: fixed; top:0; left:0; right:0; z-index: 100; border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); }
.nav.scrolled{ background: rgba(5,6,10,.78); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border-soft); }
.nav-inner{ max-width: var(--container); margin: 0 auto; padding: 16px 28px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap: 12px; }
.brand-mark{ height: 40px; width:auto; flex-shrink:0; }
.brand-word{ display:flex; flex-direction:column; line-height:1; gap:5px; }
.brand-word-main{ font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--text); }
.brand-word-sub{ font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .22em; color: var(--text-faint); }
.nav-links{ display:flex; align-items:center; gap: 36px; font-size: 14px; font-weight:500; color: var(--text-dim); }
.nav-links a{ position:relative; transition: color .25s var(--ease); }
.nav-links a:not(.nav-cta):hover, .nav-links a.active:not(.nav-cta){ color: var(--text); }
.nav-links a:not(.nav-cta)::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease); }
.nav-links a:not(.nav-cta):hover::after, .nav-links a.active:not(.nav-cta)::after{ transform: scaleX(1); }
.nav-cta{ color: var(--text) !important; border: 1px solid var(--border); padding: 9px 18px; border-radius: 100px;
  transition: border-color .25s var(--ease), background .25s var(--ease); }
.nav-cta:hover{ border-color: var(--accent); background: rgba(169,193,238,.06); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; z-index:110; }
.nav-toggle span{ width:22px; height:2px; background: var(--text); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   HERO
   ============================================ */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:center; justify-content:center; padding: 140px 28px 100px; isolation:isolate; }
#circuitCanvas{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.55; }
.hero{ --mx: 50%; --my: 30%; }
.hero::before{ content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(ellipse 60% 50% at 50% 15%, rgba(95,127,224,.16), transparent 70%); }
.hero::after{ content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(500px circle at var(--mx) var(--my), rgba(169,193,238,.10), transparent 60%); transition: background .15s linear; }
.hero-inner{ max-width: 860px; text-align:center; margin:0 auto; opacity:0; transform: perspective(1200px) translateY(28px) rotateX(6deg); transition: opacity 1s var(--ease-3d), transform 1s var(--ease-3d); }
.hero-inner.hero-in{ opacity:1; transform:none; }
.hero-inner.hero-in .eyebrow{ transition-delay: .05s; }
.hero-title{ font-size: clamp(2.1rem, 5.6vw, 4.4rem); line-height: 1.05; color: var(--text); letter-spacing: -.025em; font-weight:700; }
.hero-title-accent{ background: linear-gradient(100deg, var(--c-software) 0%, var(--c-ai) 33%, var(--c-iot) 66%, var(--c-auto) 100%);
  -webkit-background-clip: text; background-clip:text; color:transparent; background-size: 300% auto; animation: shine 8s linear infinite;
  filter: drop-shadow(0 0 34px rgba(157,111,216,.22)); }
@keyframes shine{ to{ background-position: 300% center; } }
.hero-sub{ margin: 28px auto 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--text-dim); }
.hero-actions{ margin-top: 40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn{ font-family: var(--font-body); font-weight: 600; font-size: 14.5px; padding: 14px 28px; border-radius: 100px;
  display:inline-flex; align-items:center; gap:8px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.btn-primary{ background: var(--text); color: var(--bg); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(238,240,244,.35); }
.btn-ghost{ border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent); background: rgba(169,193,238,.06); transform: translateY(-2px); }
.hero-scroll{ position:absolute; bottom: 36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); }
.hero-scroll span{ width:1px; height:34px; background: linear-gradient(var(--accent), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform: scaleY(0); transform-origin:top; } 50%{ transform: scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform: scaleY(0); transform-origin:bottom; } }

/* ============================================
   MARQUEE STRIP
   ============================================ */
.strip{ position:relative; z-index:1; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--bg-alt); overflow:hidden; padding: 16px 0; }
.strip-track{ display:flex; width:max-content; gap: 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: var(--text-faint); animation: marquee 32s linear infinite; }
.strip-track span{ white-space:nowrap; }
.strip-track .sep{ color: var(--accent); opacity:.5; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================
   METRICS / TRUST STRIP
   ============================================ */
.metrics{ position:relative; z-index:1; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.metrics-inner{ max-width: var(--container); margin:0 auto; padding: 46px 28px; display:grid; grid-template-columns: repeat(5,1fr); gap: 20px; }
.metric{ display:flex; flex-direction:column; gap:8px; text-align:center; border-left:1px solid var(--border-soft); padding-left:20px; }
.metric:first-child{ border-left:none; padding-left:0; }
.metric-num{ font-family: var(--font-display); font-size: clamp(20px,2.4vw,28px); font-weight:800; color: var(--text);
  background: linear-gradient(100deg, var(--c-software), var(--c-ai)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.metric-label{ font-size:12.5px; color: var(--text-dim); line-height:1.45; }
@media (max-width: 900px){
  .metrics-inner{ grid-template-columns: repeat(2,1fr); text-align:left; }
  .metric{ border-left:none; padding-left:0; border-top:1px solid var(--border-soft); padding-top:16px; }
}

/* ============================================
   SECTION HEAD (shared)
   ============================================ */
.section-head{ position:relative; z-index:1; max-width: var(--container); margin: 0 auto; padding: 120px 28px 56px; }
.section-title{ font-size: clamp(1.85rem, 4.2vw, 2.95rem); line-height: 1.1; letter-spacing:-.012em; max-width: 720px; }
.section-sub{ margin-top: 18px; max-width: 560px; color: var(--text-dim); font-size: 16px; line-height:1.6; }

/* ============================================
   SERVICES: 3D DEPARTMENT CARDS
   ============================================ */
.services{ position:relative; z-index:1; background: var(--bg); padding-bottom: 120px; }
.dept-grid-3d{
  max-width: var(--container); margin: 0 auto; padding: 0 28px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  perspective: 1600px; align-items:start;
}
/* Each department is a single <details> element: the tilting 3D card is the
   <summary>, and the full service list is revealed inline as the body when
   expanded - so every service is defined once, in one place. */
.dept-accordion{ display:contents; }
.dept-accordion[open]{ display:block; grid-column: 1 / -1; }
.dept-card{
  --dc: var(--c-software); --dc-soft: var(--c-software-soft);
  position:relative; text-align:left; background: var(--panel); display:block;
  border: 1px solid var(--border); border-radius: 20px; padding: 34px 30px 30px;
  overflow:hidden; cursor:pointer; width:100%;
  list-style:none; user-select:none; -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-3d), border-color .4s var(--ease), box-shadow .5s var(--ease-3d);
}
.dept-card::-webkit-details-marker{ display:none; }
.dept-card::marker{ content:''; }
.dept-card[data-color="ai"]{ --dc: var(--c-ai); --dc-soft: var(--c-ai-soft); }
.dept-card[data-color="iot"]{ --dc: var(--c-iot); --dc-soft: var(--c-iot-soft); }
.dept-card[data-color="auto"]{ --dc: var(--c-auto); --dc-soft: var(--c-auto-soft); }
.dept-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:0;
  background: radial-gradient(420px circle at 20% 0%, var(--dc-soft), transparent 60%);
  transition: opacity .5s var(--ease);
}
.dept-card:hover{ transform: translateY(-8px) rotateX(4deg) rotateY(-3deg); border-color: var(--dc); box-shadow: 0 30px 60px -30px var(--dc-soft), 0 0 0 1px var(--dc-soft) inset; }
.dept-card:hover::before{ opacity:1; }
.dept-card:active{ transform: translateY(-3px) scale(.99); }
.dept-card > *{ position:relative; z-index:1; }
.dept-accordion[open] .dept-card{ border-color: var(--dc); box-shadow: 0 0 0 1px var(--dc-soft) inset; border-radius: 20px 20px 0 0; }
.dept-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.dept-card-index{ font-family: var(--font-mono); font-size: 12px; color: var(--dc); letter-spacing:.08em; }
.dept-card-icon{ width: 40px; height:40px; border: 1px solid var(--border); border-radius: 11px; display:flex; align-items:center; justify-content:center; color: var(--dc); transition: border-color .3s var(--ease), transform .4s var(--ease-3d); }
.dept-card:hover .dept-card-icon{ border-color: var(--dc); transform: rotateY(180deg); }
.dept-card-icon svg{ width:19px; height:19px; transition: transform .4s var(--ease-3d); }
.dept-card:hover .dept-card-icon svg{ transform: rotateY(180deg); }
.dept-card-name{ font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 23px); font-weight:600; color: var(--text); margin-bottom: 10px; }
.dept-card-tagline{ font-size: 14px; color: var(--text-dim); line-height:1.55; margin-bottom: 10px; max-width: 380px; }
.dept-card-keywords{ font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height:1.6; margin-bottom: 20px; max-width: 380px; }
.dept-card-cta{ display:inline-flex; align-items:center; gap:8px; font-size: 13px; font-weight:600; color: var(--dc); font-family: var(--font-mono); letter-spacing:.04em; }
.dept-card-cta svg{ width:14px; height:14px; transition: transform .35s var(--ease-3d); }
.dept-card:hover .dept-card-cta svg{ transform: translateX(5px); }
.cta-open-label{ display:none; }
.dept-accordion[open] .cta-closed-label{ display:none; }
.dept-accordion[open] .cta-open-label{ display:inline; }
.dept-accordion[open] .dept-card-cta svg{ transform: rotate(90deg); }
.dept-accordion[open] .dept-card:hover .dept-card-cta svg{ transform: rotate(90deg) translateX(5px); }

/* Expanded service list for the department, directly beneath its card */
.dept-card-body{
  background: var(--panel); border: 1px solid var(--border); border-top:none;
  border-radius: 0 0 20px 20px; padding: 28px 30px 32px;
}
.dept-card-body > p{ font-size:14px; color: var(--text-dim); line-height:1.6; margin: 0 0 20px; max-width: 640px; }
.dept-card-body strong{ color: var(--text); font-weight:600; }
.catalog-items{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; margin:0; }
.catalog-item dt{ font-size: 13.5px; font-weight:600; color: var(--text); margin-bottom:4px; }
.catalog-item dd{ font-size: 13px; color: var(--text-dim); line-height:1.55; margin:0; }
@media (max-width: 640px){ .catalog-items{ grid-template-columns: 1fr; } .dept-card-body{ padding: 22px 20px 26px; } }

.process{ position:relative; z-index:1; background: var(--bg-alt); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.process-rail{ max-width: var(--container); margin: 0 auto; padding: 0 28px 120px; display:grid; grid-template-columns: repeat(5, 1fr); gap: 24px; perspective: 1200px; }
.process-step{ padding-top: 24px; border-top: 1px solid var(--border); position:relative; transition: transform .5s var(--ease-3d); }
.process-step:hover{ transform: translateY(-6px); }
.process-num{ font-family: var(--font-mono); font-size: 12px; color: var(--accent); display:block; margin-bottom: 14px; }
.process-step h3{ font-size: 17px; margin-bottom: 10px; }
.process-step p{ font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }

/* ============================================
   ABOUT + GLOBE
   ============================================ */
.about-hero{ position:relative; z-index:1; padding: 160px 28px 40px; max-width: var(--container); margin:0 auto; text-align:center; }
.about-hero .section-title{ max-width: 780px; margin: 0 auto; }
.about-hero .section-sub{ margin-left:auto; margin-right:auto; max-width: 620px; }

.globe-section{ position:relative; z-index:1; max-width: var(--container); margin: 0 auto; padding: 40px 28px 120px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.globe-copy .about-text{ margin-top: 18px; color: var(--text-dim); font-size: 16.5px; line-height: 1.7; max-width: 520px; }
.globe-copy .about-text strong{ color: var(--text); font-weight:600; }

.globe-wrap{ position:relative; display:flex; align-items:center; justify-content:center; height: 420px; }
.globe-canvas{ width: 100%; max-width: 420px; height: 420px; }
.globe-glow{ position:absolute; inset:0; margin:auto; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, var(--c-software-soft), transparent 65%); filter: blur(24px); animation: globeGlow 8s ease-in-out infinite; }
@keyframes globeGlow{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.globe-pin{ position:absolute; width:9px; height:9px; border-radius:50%; box-shadow: 0 0 12px 3px currentColor; animation: pinPulse 2.6s ease-in-out infinite; }
@keyframes pinPulse{ 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.5); opacity:.55; } }

.pillars{ position:relative; z-index:1; max-width: var(--container); margin: 0 auto; padding: 0 28px 130px;
  display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--border); border:1px solid var(--border); }
.pillar{ background: var(--panel); padding: 32px 26px; transition: background .3s var(--ease), transform .4s var(--ease-3d); }
.pillar:hover{ background: var(--panel-2); transform: translateY(-4px); }
.pillar-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color: var(--c-software); border:1px solid var(--border); }
.pillar:nth-child(2) .pillar-icon{ color: var(--c-ai); }
.pillar:nth-child(3) .pillar-icon{ color: var(--c-iot); }
.pillar:nth-child(4) .pillar-icon{ color: var(--c-auto); }
.pillar-icon svg{ width:18px; height:18px; }
.pillar h4{ font-size:15px; margin-bottom:8px; }
.pillar p{ font-size:13.5px; color: var(--text-dim); line-height:1.55; }

/* ============================================
   FAQ
   ============================================ */
.faq-list{ position:relative; z-index:1; max-width: 860px; margin: 0 auto 140px; padding: 0 28px; border-top:1px solid var(--border); }
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-item:nth-child(4n+1){ --fc: var(--c-software); }
.faq-item:nth-child(4n+2){ --fc: var(--c-ai); }
.faq-item:nth-child(4n+3){ --fc: var(--c-iot); }
.faq-item:nth-child(4n+4){ --fc: var(--c-auto); }
.faq-q{ width:100%; display:flex; align-items:center; gap:20px; padding: 26px 6px; text-align:left; position:relative; transition: padding-left .35s var(--ease); }
.faq-q::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--fc); transform: scaleY(0); transform-origin:top; transition: transform .4s var(--ease); }
.faq-item[data-open="true"] .faq-q::before{ transform: scaleY(1); }
.faq-q:hover{ padding-left: 16px; }
.faq-q-text{ flex:1; font-family: var(--font-display); font-size: clamp(15.5px, 2vw, 18px); font-weight:600; color: var(--text); }
.faq-plus{ width:18px; height:18px; position:relative; flex-shrink:0; }
.faq-plus::before, .faq-plus::after{ content:''; position:absolute; background: var(--text-dim); transition: transform .35s var(--ease), background .3s var(--ease); }
.faq-plus::before{ width:100%; height:1.5px; top:50%; left:0; transform: translateY(-50%); }
.faq-plus::after{ height:100%; width:1.5px; left:50%; top:0; transform: translateX(-50%); }
.faq-item[data-open="true"] .faq-plus::after{ transform: translateX(-50%) rotate(90deg); }
.faq-item[data-open="true"] .faq-plus::before, .faq-item[data-open="true"] .faq-plus::after{ background: var(--fc); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.faq-a-inner{ padding: 0 6px 28px 6px; max-width: 640px; color: var(--text-dim); font-size:15px; line-height:1.65; }

/* ============================================
   CONTACT
   ============================================ */
.contact{ position:relative; z-index:1; background: var(--bg-alt); border-top:1px solid var(--border-soft); }
.contact-inner{ max-width: var(--container); margin:0 auto; padding: 120px 28px; text-align:center; }
.contact-title{ margin:0 auto; }
.contact .section-sub{ margin-left:auto; margin-right:auto; }
.contact-grid{ margin-top: 48px; display:flex; justify-content:center; gap: 20px; flex-wrap:wrap; }
.contact-card{ display:flex; align-items:center; gap: 18px; border: 1px solid var(--border); padding: 22px 32px; border-radius: 16px; max-width: 100%;
  transition: border-color .3s var(--ease), transform .3s var(--ease-3d), background .3s var(--ease); }
.contact-card:hover{ border-color: var(--accent); transform: translateY(-3px); background: rgba(169,193,238,.05); }
.contact-label{ font-family: var(--font-mono); font-size: 11px; text-transform:uppercase; letter-spacing:.1em; color: var(--text-faint); }
.contact-value{ font-family: var(--font-display); font-size: 19px; font-weight:600; }
.contact-arrow{ color: var(--accent); font-size: 18px; transition: transform .3s var(--ease); }
.contact-card:hover .contact-arrow{ transform: translateX(4px); }
.contact-note{ margin-top: 36px; color: var(--text-faint); font-size: 13.5px; }

/* ============================================
   SELECTED WORK: homepage case-study preview cards
   ============================================ */
.work{ position:relative; z-index:1; background: var(--bg); }
.work-grid{ max-width: var(--container); margin: 0 auto 130px; padding: 0 28px; display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.work-card{ --dc: var(--c-software); --dc-soft: var(--c-software-soft); display:block; background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; overflow:hidden; transition: transform .5s var(--ease-3d), border-color .4s var(--ease), box-shadow .5s var(--ease-3d); }
.work-card[data-color="auto"]{ --dc: var(--c-auto); --dc-soft: var(--c-auto-soft); }
.work-card:hover{ transform: translateY(-8px); border-color: var(--dc); box-shadow: 0 30px 60px -30px var(--dc-soft); }
.work-card-media{ position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--bg-alt); border-bottom:1px solid var(--border); }
.work-card-media img{ width:100%; height:100%; object-fit:cover; object-position: top center; transition: transform .6s var(--ease-3d); }
.work-card:hover .work-card-media img{ transform: scale(1.045); }
.work-card-body{ padding: 26px 28px 30px; }
.work-card-tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--dc); }
.work-card-body h3{ font-family: var(--font-display); font-size: clamp(18px,2vw,21px); margin: 12px 0 10px; color: var(--text); }
.work-card-body p{ font-size: 14px; color: var(--text-dim); line-height:1.6; margin-bottom: 20px; }
@media (max-width: 900px){ .work-grid{ grid-template-columns: 1fr; } }

/* ============================================
   PAGE TEASERS (home page mini-sections linking out)
   ============================================ */
.teaser{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; padding: 0 28px 130px; display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.teaser-copy .about-text{ margin-top:18px; color: var(--text-dim); font-size:16px; line-height:1.7; max-width:480px; }
.teaser-link{ margin-top: 28px; display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:13px; font-weight:600; color: var(--accent); }
.teaser-link svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.teaser-link:hover svg{ transform: translateX(5px); }
.faq-mini{ display:flex; flex-direction:column; gap:1px; background: var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-mini-item{ background: var(--panel); padding: 20px 22px; font-size:14px; color: var(--text-dim); }
.faq-mini-item strong{ display:block; color: var(--text); font-size:14.5px; margin-bottom:6px; font-family: var(--font-display); }

@media (max-width: 900px){
  .teaser, .globe-section{ grid-template-columns: 1fr; }
  .dept-grid-3d{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: repeat(2,1fr); }
  .about-mark{ max-width: 200px; }
  .process-rail{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PORTFOLIO / CASE STUDIES
   ============================================ */
.case-hero{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; padding: 160px 28px 20px; text-align:center; }
.case-hero .section-title{ max-width: 780px; margin:0 auto; }
.case-hero .section-sub{ margin-left:auto; margin-right:auto; max-width: 620px; }

.case-list{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; padding: 60px 28px 40px; display:flex; flex-direction:column; gap: 8px; }
.case-card{ --dc: var(--c-software); --dc-soft: var(--c-software-soft); scroll-margin-top: 100px;
  display:grid; grid-template-columns: 1fr; gap: 40px; padding: 70px 0; border-top: 1px solid var(--border-soft); }
.case-card[data-color="auto"]{ --dc: var(--c-auto); --dc-soft: var(--c-auto-soft); }
.case-head{ display:flex; flex-direction:column; gap: 18px; max-width: 720px; }
.case-tag{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--dc); display:flex; align-items:center; gap:8px; }
.case-tag::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--dc); box-shadow: 0 0 10px 2px var(--dc-soft); }
.case-title{ font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--text); }
.case-desc{ font-size: 15.5px; line-height:1.7; color: var(--text-dim); }
.case-desc strong{ color: var(--text); font-weight:600; }
.case-facts{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:8px; }
.case-fact{ background: var(--panel); padding: 18px 20px; }
.case-fact-label{ display:block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; }
.case-fact-value{ font-size:14px; color: var(--text); font-weight:600; line-height:1.4; }

.shot-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.shot-grid.single{ grid-template-columns: 1fr; }
.shot{ position:relative; }
.shot-chrome{ display:flex; align-items:center; gap:7px; padding: 11px 14px; background: var(--panel-2); border: 1px solid var(--border); border-bottom:none; border-radius: 12px 12px 0 0; }
.shot-chrome span{ width:9px; height:9px; border-radius:50%; background: var(--border); }
.shot-chrome span:nth-child(1){ background:#ff5f57; opacity:.55; }
.shot-chrome span:nth-child(2){ background:#febc2e; opacity:.55; }
.shot-chrome span:nth-child(3){ background:#28c840; opacity:.55; }
.shot-chrome-label{ margin-left:10px; font-family: var(--font-mono); font-size:11px; color: var(--text-faint); }
.shot-media{ border: 1px solid var(--border); border-radius: 0 0 12px 12px; overflow:hidden; background: var(--bg-alt); aspect-ratio: 16/10;
  transition: transform .5s var(--ease-3d), border-color .4s var(--ease), box-shadow .5s var(--ease-3d); }
.shot-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot:hover .shot-media{ transform: translateY(-4px); border-color: var(--dc); box-shadow: 0 30px 60px -30px var(--dc-soft); }
.shot-caption{ margin-top: 14px; font-size:13px; color: var(--text-dim); }
.shot-caption strong{ color: var(--text); font-family: var(--font-display); font-weight:600; }
/* the patient screenshot is a narrow, lower-resolution phone capture, so rather than
   stretching it to fill a tall box (which reads as blurry), give it a taller frame
   and let it sit at its own natural size, centered and unscaled */
.shot.tall .shot-media{ aspect-ratio: auto; height: 480px; display:flex; align-items:center; justify-content:center; padding: 22px; }
.shot.tall .shot-media img{ width:auto; height:100%; max-width:100%; object-fit:contain; object-position:center; box-shadow: 0 20px 50px -25px rgba(0,0,0,.5); border-radius:6px; }
@media (max-width: 900px){ .shot.tall .shot-media{ height: 420px; } }
@media (max-width: 900px){ .shot-grid{ grid-template-columns: 1fr; } .case-facts{ grid-template-columns: 1fr; } }

/* ============================================
   FOOTER
   ============================================ */
.footer{ position:relative; z-index:1; background: var(--bg); }
.footer-inner{ max-width: var(--container); margin:0 auto; padding: 40px 28px; display:flex; align-items:center; justify-content:space-between; border-top: 1px solid var(--border-soft); flex-wrap:wrap; gap:16px; }
.footer-brand{ opacity:.85; }
.footer-brand .brand-mark{ height: 30px; }
.footer-copy{ font-size: 13px; color: var(--text-faint); }
.footer-links{ display:flex; gap:22px; font-size:13px; color: var(--text-dim); }
.footer-links a:hover{ color: var(--text); }

/* ============================================
   SCROLL REVEAL: 3D tilt-in
   ============================================ */
[data-reveal]{ opacity:0; transform: perspective(1000px) translateY(30px) rotateX(6deg); transition: opacity .9s var(--ease-3d), transform .9s var(--ease-3d); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-stagger]{ transition-delay: calc(var(--si, 0) * 90ms); }

/* ============================================
   TEXT REVEAL: section titles animate in word by word
   ============================================ */
.word-reveal{ display:inline-block; opacity:0; transform: translateY(.5em); transition: opacity .6s var(--ease), transform .7s var(--ease-3d); transition-delay: calc(var(--wi, 0) * 45ms); }
.word-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .word-reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================
   PRELOADER: brief curtain on first load
   ============================================ */
.preloader{ position:fixed; inset:0; z-index:1000; background: var(--bg); display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.preloader img{ height:34px; opacity:0; animation: preloaderMark .9s var(--ease) forwards .1s; }
.preloader-bar{ position:absolute; bottom:0; left:0; height:2px; width:0%; background: var(--accent);
  transition: width .5s var(--ease); }
@keyframes preloaderMark{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.preloader.done{ opacity:0; visibility:hidden; }
@media (prefers-reduced-motion: reduce){ .preloader{ transition: opacity .2s linear; } .preloader img{ animation:none; opacity:1; } }

/* ============================================
   PAGE TRANSITIONS: 3D swing between pages
   ============================================ */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: pageOut .62s cubic-bezier(.6,0,.4,1) both; }
  ::view-transition-new(root){ animation: pageIn .62s cubic-bezier(.2,.9,.3,1) both; }
  @keyframes pageOut{ to{ transform: perspective(1400px) rotateY(-10deg) translateZ(-220px) translateX(-2%); opacity:0; } }
  @keyframes pageIn{ from{ transform: perspective(1400px) rotateY(10deg) translateZ(-220px) translateX(2%); opacity:0; } to{ transform:none; opacity:1; } }
}
.page-loading-bar{ position: fixed; top:0; left:0; height:2px; background: linear-gradient(90deg, var(--c-software), var(--c-ai), var(--c-iot), var(--c-auto));
  z-index: 400; width:0%; transition: width .3s var(--ease); opacity:0; }
.page-loading-bar.active{ opacity:1; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 760px){
  .nav-links{ position: fixed; top:0; right:0; height:100vh; width: min(78vw, 320px); background: rgba(8,10,15,.98); backdrop-filter: blur(16px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap: 28px; padding: 40px; transform: translateX(100%);
    transition: transform .4s var(--ease); border-left: 1px solid var(--border); font-size: 17px; }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-top: 10px; }
  .process-rail{ grid-template-columns: 1fr; gap: 32px; }
  .section-head{ padding: 90px 20px 40px; }
  .about-hero{ padding: 130px 20px 20px; }
  .globe-section, .contact-inner, .teaser{ padding-left:20px; padding-right:20px; }
  .footer-inner{ flex-direction:column; gap:16px; text-align:center; }
  .contact-card{ flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 20px 22px; }
  .contact-value{ font-size: 16px; word-break: break-word; }
  .contact-arrow{ align-self: flex-end; margin-top: -22px; }
  .brand-mark{ height: 32px; }
  .brand-word-main{ font-size: 15px; }
  .pillars{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .hero{ padding: 120px 20px 80px; }
  .btn{ width:100%; justify-content:center; }
  .hero-actions{ flex-direction:column; width:100%; }
}

/* ============================================
   ABOUT: enlarged lead statement
   ============================================ */
.about-lead{
  position:relative; z-index:1; max-width: 780px; margin: 26px auto 0;
  font-family: var(--font-display); font-weight:500; letter-spacing:-.005em;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem); line-height: 1.55; color: var(--text);
}
.about-lead strong{ color: var(--accent-strong); font-weight:600; }

/* ============================================
   EXPANDABLE MEDIA: click-to-fullscreen affordance
   applied to any screenshot the visitor can open
   ============================================ */
.zoomable{ position:relative; cursor: zoom-in; }
.zoomable .expand-hint{
  position:absolute; top:8px; right:8px; z-index:3; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,9,8,.55); border:1px solid var(--border); color: var(--text);
  opacity:0; transform: translateY(-4px); backdrop-filter: blur(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.zoomable .expand-hint svg{ width:15px; height:15px; }
.zoomable:hover .expand-hint{ opacity:1; transform:none; border-color: var(--accent); }
.zoomable:focus-visible .expand-hint{ opacity:1; transform:none; }

/* ============================================
   LIGHTBOX: fullscreen image viewer
   ============================================ */
.lightbox{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  padding: 5vh 5vw; opacity:0; pointer-events:none; visibility:hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.lightbox.open{ opacity:1; pointer-events:auto; visibility:visible; transition: opacity .35s var(--ease); }
.lightbox-backdrop{ position:absolute; inset:0; background: rgba(6,5,4,.92); backdrop-filter: blur(4px); }
.lightbox-figure{
  position:relative; z-index:1; max-width: 100%; max-height: 100%; display:flex; flex-direction:column; gap:14px;
  transform: scale(.96); transition: transform .35s var(--ease-3d);
}
.lightbox.open .lightbox-figure{ transform: none; }
.lightbox-figure img{
  max-width: min(92vw, 1100px); max-height: 82vh; width:auto; height:auto; object-fit:contain;
  border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 60px 120px -40px rgba(0,0,0,.7);
}
.lightbox-caption{ text-align:center; font-family: var(--font-mono); font-size:12.5px; color: var(--text-dim); letter-spacing:.03em; }
.lightbox-close{
  position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:22px; color: var(--text); background: var(--panel);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox-close:hover{ border-color: var(--accent); transform: rotate(90deg); }
body.lightbox-open{ overflow:hidden; }
@media (max-width: 640px){
  .lightbox-close{ top:-46px; right:0; width:36px; height:36px; }
}

/* ============================================
   BLOG: listing grid + long-form article typography
   ============================================ */
.blog-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: var(--container); margin: 0 auto; padding: 0 28px 120px; }
.blog-card{ --dc: var(--c-software); --dc-soft: var(--c-software-soft); display:flex; flex-direction:column; background: var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition: transform .4s var(--ease-3d), border-color .4s var(--ease), box-shadow .5s var(--ease-3d); }
.blog-card[data-color="ai"]{ --dc: var(--c-ai); --dc-soft: var(--c-ai-soft); }
.blog-card[data-color="iot"]{ --dc: var(--c-iot); --dc-soft: var(--c-iot-soft); }
.blog-card[data-color="auto"]{ --dc: var(--c-auto); --dc-soft: var(--c-auto-soft); }
.blog-card:hover{ transform: translateY(-6px); border-color: var(--dc); box-shadow: 0 30px 60px -30px var(--dc-soft); }
.blog-card-top{ height: 92px; display:flex; align-items:flex-start; justify-content:space-between; padding: 20px 22px; background:
  linear-gradient(135deg, var(--dc-soft, var(--panel-2)) 0%, transparent 100%); border-bottom:1px solid var(--border); }
.blog-card-tag{ font-family: var(--font-mono); font-size:11px; letter-spacing:.05em; color: var(--dc, var(--accent)); text-transform:uppercase; }
.blog-card-read{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); }
.blog-card-body{ padding: 20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.blog-card-title{ font-family: var(--font-display); font-size:18px; font-weight:600; color: var(--text); line-height:1.3; margin-bottom:10px; }
.blog-card-excerpt{ font-size:13.5px; color: var(--text-dim); line-height:1.6; margin-bottom:18px; flex:1; }
.blog-card-cta{ font-size:12.5px; font-weight:600; color: var(--dc, var(--accent)); display:inline-flex; align-items:center; gap:6px; }
.blog-card-cta svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.blog-card:hover .blog-card-cta svg{ transform: translateX(4px); }
@media (max-width: 760px){ .blog-grid{ grid-template-columns: 1fr; } }

.article{ max-width: 760px; margin: 0 auto; padding: 0 28px 100px; }
.article-meta{ display:flex; gap:14px; align-items:center; font-family: var(--font-mono); font-size:12px; color: var(--text-faint); margin-bottom:18px; flex-wrap:wrap; }
.article-meta .dot-sep{ width:3px; height:3px; border-radius:50%; background: var(--text-faint); }
.article-lead{ font-size: 16px; color: var(--text-dim); line-height:1.7; margin-bottom: 40px; max-width: 680px; }
.article-body{ font-size:15px; line-height:1.8; color: var(--text-dim); }
.article-body h2{ font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.65rem); color: var(--text); font-weight:600; margin: 48px 0 18px; letter-spacing:-.01em; }
.article-body h3{ font-family: var(--font-display); font-size: 1.1rem; color: var(--text); font-weight:600; margin: 32px 0 14px; }
.article-body p{ margin: 0 0 20px; }
.article-body ul, .article-body ol{ margin: 0 0 20px; padding-left: 22px; }
.article-body li{ margin-bottom: 8px; }
.article-body strong{ color: var(--text); font-weight:600; }
.article-body code{ font-family: var(--font-mono); font-size: .88em; background: var(--panel-2); border:1px solid var(--border); padding: 2px 6px; border-radius:5px; color: var(--accent-strong); }
.article-body a{ color: var(--accent-strong); text-decoration: underline; text-underline-offset:2px; }
.article-body blockquote{ margin: 28px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); color: var(--text); font-style:italic; }
.article-table{ width:100%; border-collapse:collapse; margin: 24px 0 32px; font-size: 13.5px; }
.article-table th{ text-align:left; font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); padding: 10px 14px; border-bottom:1px solid var(--border); }
.article-table td{ padding: 12px 14px; border-bottom:1px solid var(--border-soft); color: var(--text-dim); vertical-align:top; }
.article-table tr:last-child td{ border-bottom:none; }
.article-cta{ margin-top: 56px; padding: 28px; border-radius:16px; background: var(--panel); border:1px solid var(--border); text-align:center; }
.article-cta p{ color: var(--text-dim); font-size:14px; margin-bottom:16px; }
.article-back{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color: var(--text-dim); margin-bottom: 28px; transition: color .25s var(--ease); }
.article-back:hover{ color: var(--accent); }
.article-back svg{ width:14px; height:14px; }
@media (max-width: 640px){ .article{ padding: 0 20px 80px; } }