/* ==========================================================================
   NYXORA — Design tokens
   Signature motif: concentric "signal rings" (from the brand mark) used as
   a literal diagram of the data → model → agent → product stack.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- color: brand tokens --- */
  --purple-900:#150C26;
  --purple-800:#1E1236;
  --purple-700:#3A2065;
  --purple-500:#6639A6; /* primary */
  --purple-400:#7A51B9;
  --purple-300:#926DCB;
  --purple-200:#B49ADC;
  --purple-100:#D5C9ED;
  --purple-050:#F3EFFB;

  --coral-500:#FF3E4D; /* accent / CTA */
  --coral-400:#FF555F;
  --coral-300:#FF747F;
  --coral-100:#FFD2D6;

  --gray-900:#14101C;
  --gray-700:#3F3B47;
  --gray-500:#6B6772;
  --gray-400:#9C9C9C;
  --gray-300:#C9C9C9;
  --gray-200:#E3E3E3;
  --gray-100:#F4F3F7;
  --white:#FFFFFF;

  /* --- semantic --- */
  --bg:#FFFFFF;
  --bg-soft:var(--gray-100);
  --bg-dark:var(--purple-900);
  --text:var(--gray-900);
  --text-soft:var(--gray-500);
  --text-invert:#FFFFFF;
  --line:var(--gray-200);
  --line-dark:rgba(255,255,255,.14);

  /* --- type ---
     Brand spec (Typography_System.pdf) uses one family, Uniform Pro, across every
     role — weight alone carries the hierarchy (Ultra/Black for headings, Medium/
     Regular for body). Uniform Pro is a paid font (Miller Type Foundry) with no
     free web-embeddable license, so Sora stands in as the closest free geometric
     equivalent (circle-based "O", same single-family-multi-weight structure).
     Swap the @import + these two variables for the real Uniform Pro webfont
     files if/when a license is available. */
  --font-display:'Sora', sans-serif;
  --font-body:'Sora', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* --- layout --- */
  --maxw:1220px;
  --pad:clamp(20px, 4vw, 56px);
  --radius:14px;
  --radius-sm:8px;

  --ease:cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:500; /* Body/B-1 · Uniform Pro Medium */
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.5rem, 5vw, 4.4rem); font-weight:800; letter-spacing:-0.02em;} /* H-1 · Ultra */
h2{font-size:clamp(1.9rem, 3.2vw, 2.7rem); font-weight:800;} /* H-2 · Black */
h3{font-size:clamp(1.25rem, 2vw, 1.55rem); font-weight:700;} /* H-3 · Bold */
h4{font-weight:600;} /* H-4 · Medium (bumped for on-screen legibility) */
p{margin:0 0 1em; color:var(--text-soft); font-weight:400;} /* Body/B-2 · Regular */

.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--purple-500);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--coral-500);
  display:inline-block;
}
.on-dark .eyebrow{color:var(--purple-200);}
.on-dark .eyebrow::before{background:var(--coral-400);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--coral-500);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.9em 1.6em;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s, color .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--coral-500);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(255,62,77,.55);
}
.btn-primary:hover{background:var(--coral-400); box-shadow:0 16px 30px -10px rgba(255,62,77,.6);}
.btn-outline{
  background:transparent;
  border-color:var(--gray-300);
  color:var(--text);
}
.btn-outline:hover{border-color:var(--purple-500); color:var(--purple-500);}
.on-dark .btn-outline,
.cta-band .btn-outline{border-color:var(--line-dark); color:#fff;}
.on-dark .btn-outline:hover,
.cta-band .btn-outline:hover{border-color:var(--purple-200); color:var(--purple-100);}
.btn-ghost{
  background:transparent;
  color:var(--purple-500);
  padding:.9em .2em;
}
.btn-ghost:hover{color:var(--coral-500);}
.btn-sm{padding:.65em 1.2em; font-size:.85rem;}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--purple-500);}
.brand .mark{width:34px; height:34px;}
.nav-links{display:flex; align-items:center; gap:2.2em; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:.94rem; font-weight:500; color:var(--text);
  position:relative; padding:.2em 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--coral-500); transition:right .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{right:0;}
.nav-links a[aria-current="page"]{color:var(--purple-500);}
.nav-cta{display:flex; align-items:center; gap:1.4em;}
.lang-switch{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:999px; padding:.35em .8em !important;
}
.lang-switch::after{display:none;}
.lang-switch:hover{border-color:var(--purple-500); color:var(--purple-500);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0; transition:transform .25s, opacity .25s;}

@media (max-width: 880px){
  .nav-toggle{display:block;}
  .nav-links{
    position:fixed; top:70px; left:0; right:0; height:calc(100vh - 70px); background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    padding:12px var(--pad) 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    border-bottom:1px solid var(--line);
    overflow-y:auto;
  }
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links li{width:100%; border-top:1px solid var(--line);}
  .nav-links a{display:block; padding:14px 0;}
  .nav-cta .btn-outline{display:none;}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ==========================================================================
   Rings — signature motif (SVG, currentColor based)
   ========================================================================== */
.ring-mark{color:var(--purple-500);}
.on-dark .ring-mark{color:var(--purple-200);}

.rings-decor{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.rings-decor svg{position:absolute;}

@keyframes ring-pulse{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.035); opacity:.9; }
}
@keyframes ring-rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.orbit-diagram .ring{
  transform-origin:center;
  animation:ring-pulse 7s ease-in-out infinite;
}
.orbit-diagram .ring:nth-child(2){animation-delay:.6s;}
.orbit-diagram .ring:nth-child(3){animation-delay:1.2s;}
.orbit-diagram .ring:nth-child(4){animation-delay:1.8s;}
.orbit-diagram .dot{animation:ring-pulse 4s ease-in-out infinite;}

/* section divider ring, peeking from the edge */
.divider-ring{
  position:relative;
  height:1px;
  background:var(--line);
  margin: 0;
}
.on-dark .divider-ring{background:var(--line-dark);}

/* ==========================================================================
   Sections / layout helpers
   ========================================================================== */
section{position:relative;}
.section{padding:clamp(64px,9vw,120px) 0;}
.section-tight{padding:clamp(40px,6vw,72px) 0;}
.on-dark{background:var(--bg-dark); color:#fff;}
.on-dark p{color:var(--purple-100);}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff;}
.bg-soft{background:var(--bg-soft);}

.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.grid{display:grid; gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width: 980px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;}
}
.hero h1{margin-bottom:.4em;}
.hero .accent{color:var(--purple-500);}
.hero-lead{font-size:1.12rem; max-width:46ch;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:2em;}
.hero-note{
  display:inline-flex; align-items:center; gap:.7em;
  margin-top:1.6em;
  font-family:var(--font-mono); font-size:.84rem; color:var(--text-soft);
  transition:color .2s var(--ease);
}
.hero-note:hover{color:var(--text);}
.hero-note strong{color:var(--purple-500); font-weight:600;}
.hero-note .ico{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-050); color:var(--purple-500);
}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:2.6em;}
.tag{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em;
  padding:.5em .9em; border-radius:999px; border:1px solid var(--line);
  color:var(--text-soft);
}

.hero-art{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.hero-orb{
  position:absolute; inset:5%; border-radius:50%;
  background:var(--bg-soft); z-index:0;
}
.hero-rings{
  position:relative; z-index:1;
  width:38%; height:auto;
  color:var(--purple-500);
}

/* Icons float directly, no card/frame — just the colored chip + glyph. */
.floating-card{
  position:absolute; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%);
}
.floating-card .ico{
  width:76px; height:76px; border-radius:20px; flex:none;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 10px 18px rgba(20,16,28,.16));
}
.floating-card .ico svg{width:38px; height:38px;}
.ico-purple{background:var(--purple-050); color:var(--purple-500);}
.ico-coral{background:var(--coral-100); color:var(--coral-500);}
/* Model-provider badges: real brand colors, intentionally outside the site palette */
.ico-openai{background:#E7F5F0; color:#10A37F;}
.ico-claude{background:#FBEAE2; color:#D97757;}
.ico-mistral{background:#FFF4E0;}

/* 7 icons spread evenly on a circle around the logo (360°/7), mirrored
   left/right for a symmetric layout — one icon sits at the top pole. */
.fc-openai{left:50%; top:-4%;}
.fc-agents{left:92.2%; top:16.3%;}
.fc-claude{left:102.6%; top:62%;}
.fc-auto{left:73.4%; top:98.6%;}
.fc-mistral{left:26.6%; top:98.6%;}
.fc-stat{left:-2.6%; top:62%;}
.fc-llm{left:7.8%; top:16.3%;}

/* Pointer / touch parallax — layers move relative to cursor position via
   main.js, depth is set per-element with data-depth. Falls back to static
   when reduced motion is requested or on non-pointer environments. */
.hero-art [data-depth]{
  transition:transform .5s var(--ease);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .hero-art [data-depth]{ transition:none !important; }
}
@media (max-width:940px){
  .floating-card .ico{width:58px; height:58px; border-radius:16px;}
  .floating-card .ico svg{width:30px; height:30px;}
  .fc-openai{top:4%;}
  .fc-agents{left:85.96%; top:21.3%;}
  .fc-claude{left:94.85%; top:60.2%;}
  .fc-auto{left:69.96%; top:91.4%;}
  .fc-mistral{left:30.04%; top:91.4%;}
  .fc-stat{left:5.15%; top:60.2%;}
  .fc-llm{left:14.04%; top:21.3%;}
}
@media (max-width:560px){
  .hero-rings{width:32%;}
  .floating-card .ico{width:44px; height:44px; border-radius:13px;}
  .floating-card .ico svg{width:23px; height:23px;}
  .fc-openai{top:10%;}
  .fc-agents{left:81.3%; top:25.1%;}
  .fc-claude{left:89%; top:58.9%;}
  .fc-auto{left:67.4%; top:86%;}
  .fc-mistral{left:32.6%; top:86%;}
  .fc-stat{left:11%; top:58.9%;}
  .fc-llm{left:18.7%; top:25.1%;}
}

.orbit-diagram{
  position:relative; width:100%; max-width:440px; aspect-ratio:1/1; margin:0 auto;
}
.orbit-diagram .ring{
  position:absolute; border-radius:50%; inset:0;
}
.orbit-diagram .ring-1{inset:0%; border:1.5px solid var(--purple-200);}
.orbit-diagram .ring-2{inset:14%; border:1.5px solid var(--purple-300);}
.orbit-diagram .ring-3{inset:29%; border:2px solid var(--purple-500);}
.orbit-diagram .ring-4{inset:44%; border:2px solid var(--purple-700);}
.orbit-diagram .dot{
  position:absolute; top:50%; left:50%; width:9%; height:9%; margin:-4.5%;
  border-radius:50%; background:var(--coral-500);
  box-shadow:0 0 0 10px var(--coral-100);
}
.orbit-labels{position:absolute; inset:0; pointer-events:none;}
.orbit-label{
  position:absolute;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  display:flex; align-items:center; gap:.5em;
  color:var(--text-soft); white-space:nowrap;
}
.orbit-label::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--purple-400); flex:none;}
.ol-1{top:2%; left:-4%;}
.ol-2{top:20%; right:-10%;}
.ol-3{bottom:16%; right:-6%;}
.ol-4{bottom:-6%; left:20%;}
.ol-4::before{background:var(--coral-500);}
@media (max-width:940px){
  .orbit-label{position:static; margin-bottom:0;}
  .orbit-labels{position:static; display:flex; flex-wrap:wrap; gap:16px 24px; justify-content:center; margin-top:24px;}
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.trust-strip .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.trust-strip .label{font-family:var(--font-mono); font-size:.78rem; color:var(--text-soft); letter-spacing:.06em;}
.trust-items{display:flex; gap:2.6em; flex-wrap:wrap;}
.trust-items span{font-family:var(--font-mono); font-size:.82rem; color:var(--text-soft);}
.trust-items strong{color:var(--text); font-weight:600;}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  position:relative;
}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(20,16,28,.25); border-color:var(--purple-200);}
.card .card-icon{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-050); color:var(--purple-500);
  margin-bottom:20px;
}
.card h3{margin-bottom:.5em;}
.card p{margin-bottom:0; font-size:.96rem;}
.card-link{
  display:inline-flex; align-items:center; gap:.4em; margin-top:1.2em;
  font-size:.88rem; font-weight:600; color:var(--purple-500);
}
.card:hover .card-link{color:var(--coral-500);}

/* on dark variant */
.on-dark .card{background:rgba(255,255,255,.04); border-color:var(--line-dark);}
.on-dark .card:hover{border-color:var(--purple-300);}
.on-dark .card .card-icon{background:rgba(255,255,255,.08); color:var(--purple-100);}
.on-dark .card p{color:var(--purple-100); opacity:.85;}

/* ==========================================================================
   Process / stack rings (Data -> Modeles -> Agents -> Produit)
   ========================================================================== */
.stack{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
@media (max-width:880px){ .stack{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .stack{grid-template-columns:1fr;} }
.stack-step{
  padding:26px 22px; border:1px solid var(--line); border-radius:var(--radius-sm);
  position:relative;
}
.stack-step .idx{
  font-family:var(--font-mono); font-size:.75rem; color:var(--coral-500); letter-spacing:.08em;
  display:block; margin-bottom:14px;
}
.stack-step h4{font-family:var(--font-display); font-size:1.05rem; margin-bottom:.4em;}
.stack-step p{font-size:.88rem; margin-bottom:0;}
.stack-connector{
  display:none;
}
@media (min-width:521px){
  .stack{position:relative;}
}

/* ==========================================================================
   Values (color-meaning cards)
   ========================================================================== */
.value-card{
  border-radius:var(--radius);
  padding:30px;
  color:#fff;
}
.value-purple{background:linear-gradient(160deg, var(--purple-500), var(--purple-700));}
.value-coral{background:linear-gradient(160deg, var(--coral-500), #C22536);}
.value-gray{background:linear-gradient(160deg, #4B4854, var(--gray-900));}
.value-card .eyebrow{color:rgba(255,255,255,.8);}
.value-card .eyebrow::before{background:rgba(255,255,255,.6);}
.value-card h3{color:#fff;}
.value-card p{color:rgba(255,255,255,.82); margin-bottom:0;}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{display:flex; flex-direction:column; gap:28px;}
.stat{display:flex; flex-direction:column; gap:.3em;}
.stat .num{font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--purple-500);}
.on-dark .stat .num{color:var(--purple-200);}
.stat .lbl{font-family:var(--font-mono); font-size:.78rem; color:var(--text-soft); letter-spacing:.04em;}
.on-dark .stat .lbl{color:var(--purple-100); opacity:.75;}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:var(--bg-dark);
  color:#fff;
  border-radius:24px;
  padding:clamp(40px,6vw,72px);
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{margin-bottom:.3em; color:#fff;}
.cta-band p{color:var(--purple-100); margin-bottom:0; max-width:44ch;}
.cta-band-actions{display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:1;}
.cta-band-text{position:relative; z-index:1; max-width:560px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--purple-900);
  color:var(--purple-100);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:40px; border-bottom:1px solid var(--line-dark);
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand .brand{color:#fff;}
.footer-brand p{max-width:32ch; margin-top:14px; font-size:.92rem;}
.footer-col h4{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--purple-300); margin-bottom:1.1em; font-weight:500;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75em;}
.footer-col a{font-size:.92rem; color:var(--purple-100); opacity:.85; transition:opacity .2s, color .2s;}
.footer-col a:hover{opacity:1; color:#fff;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; font-size:.82rem; color:var(--purple-300);
}
.footer-bottom a{color:var(--purple-100);}
.footer-bottom a:hover{color:#fff;}

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.page-hero{
  padding:clamp(48px,7vw,80px) 0 clamp(32px,5vw,56px);
  position:relative; overflow:hidden;
}
.page-hero .section-head{margin-bottom:0; max-width:none; position:relative; z-index:1;}
.page-hero-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:end;}
@media (max-width:820px){.page-hero-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Services page — detail rows
   ========================================================================== */
.service-row{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;
  padding:clamp(48px,6vw,80px) 0;
  border-top:1px solid var(--line);
}
.service-row:nth-child(even) .service-visual{order:2;}
@media (max-width:860px){
  .service-row{grid-template-columns:1fr; gap:32px;}
  .service-row:nth-child(even) .service-visual{order:0;}
}
.service-visual{
  aspect-ratio:4/3; border-radius:var(--radius); background:var(--purple-050);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.service-visual img{width:100%; height:100%; object-fit:cover;}
.service-num{font-family:var(--font-mono); font-size:.8rem; color:var(--coral-500); letter-spacing:.1em; display:block; margin-bottom:1em;}
.service-deliver{list-style:none; margin:1.6em 0 0; padding:0; display:flex; flex-direction:column; gap:.7em;}
.service-deliver li{display:flex; gap:.7em; font-size:.94rem; color:var(--text);}
.service-deliver li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--coral-500); margin-top:.55em; flex:none;}

/* ==========================================================================
   About page
   ========================================================================== */
.approach-steps{counter-reset:step; display:flex; flex-direction:column;}
.approach-step{
  display:grid; grid-template-columns:80px 1fr; gap:24px;
  padding:28px 0; border-top:1px solid var(--line);
}
.approach-step:last-child{border-bottom:1px solid var(--line);}
.approach-step .step-num{
  counter-increment:step; font-family:var(--font-mono); font-size:.85rem; color:var(--purple-500);
}
.approach-step .step-num::before{content: counter(step, decimal-leading-zero);}
@media (max-width:600px){ .approach-step{grid-template-columns:1fr; gap:8px;} }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info-item{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line);}
.contact-info-item:last-child{border-bottom:1px solid var(--line);}
.contact-info-item .ico{
  width:40px; height:40px; border-radius:50%; background:var(--purple-050); color:var(--purple-500);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-item h4{margin:0 0 .2em; font-family:var(--font-body); font-weight:600; font-size:.95rem;}
.contact-info-item p{margin:0; font-size:.9rem;}

.form-card{
  background:var(--bg-soft); border-radius:var(--radius); padding:clamp(24px,4vw,44px);
  border:1px solid var(--line);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
.field label{display:block; font-size:.84rem; font-weight:600; margin-bottom:.5em; color:var(--text);}
.field input, .field select, .field textarea{
  width:100%; padding:.85em 1em; border-radius:var(--radius-sm); border:1px solid var(--gray-300);
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--purple-400); box-shadow:0 0 0 3px var(--purple-100);
}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:.8rem; color:var(--text-soft); margin-top:14px;}
.form-error{display:none; color:var(--coral-500); font-size:.84rem; margin-top:14px;}
.form-success{
  display:none; text-align:center; padding:40px 20px;
}
.form-success.show{display:block;}
.form-success .ico{
  width:64px; height:64px; border-radius:50%; background:var(--purple-050); color:var(--purple-500);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.contact-form.hide{display:none;}

/* Booking tabs (Calendly / message form) */
.booking-tabs{display:flex; gap:10px; margin-bottom:22px;}
.tab-btn{
  flex:1; padding:.9em 1em; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:#fff; font-family:var(--font-body); font-weight:600; font-size:.88rem;
  color:var(--text-soft); cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
.tab-btn.active{border-color:var(--purple-500); color:var(--purple-500); background:var(--purple-050);}
.tab-btn:hover{border-color:var(--purple-300);}
.tab-panel[hidden]{display:none;}
.calendly-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-soft);
}
.calendly-inline-widget{width:100%;}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.blog-filter{
  font-family:var(--font-mono); font-size:.78rem; padding:.55em 1.1em; border-radius:999px;
  border:1px solid var(--line); color:var(--text-soft); background:transparent; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.blog-filter.active, .blog-filter:hover{border-color:var(--purple-500); color:var(--purple-500); background:var(--purple-050);}

.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:980px){ .post-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .post-grid{grid-template-columns:1fr;} }

.post-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  background:#fff;
}
.post-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(20,16,28,.25); border-color:var(--purple-200);}
.post-thumb{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:var(--purple-050);
  display:flex; align-items:center; justify-content:center;
}
.post-thumb .orbit-diagram{max-width:58%; opacity:.9;}
.post-card.featured .post-thumb{background:linear-gradient(160deg, var(--purple-500), var(--purple-800));}
.post-card.featured .ring{border-color:rgba(255,255,255,.55) !important;}
.post-card.featured .dot{background:var(--coral-400);}

.post-thumb img, .article-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.post-body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1;}
.post-meta{
  display:flex; align-items:center; gap:.8em; margin-bottom:.9em;
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-soft); letter-spacing:.02em;
}
.post-tag{color:var(--coral-500); font-weight:600;}
.post-body h3{margin-bottom:.5em; font-size:1.15rem;}
.post-body p{font-size:.9rem; margin-bottom:0; flex:1;}
.post-link{margin-top:1.2em; font-size:.86rem; font-weight:600; color:var(--purple-500); display:inline-flex; align-items:center; gap:.4em;}
.post-card:hover .post-link{color:var(--coral-500);}

.featured-post{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); padding:36px; margin-bottom:56px;
}
@media (max-width:820px){ .featured-post{grid-template-columns:1fr;} }
.featured-post .post-thumb{border-radius:var(--radius-sm); aspect-ratio:16/11;}

/* Article page */
.article-head{max-width:760px; margin:0 auto; text-align:center;}
.article-meta{
  display:flex; align-items:center; justify-content:center; gap:1em; margin-bottom:1.2em;
  font-family:var(--font-mono); font-size:.8rem; color:var(--text-soft);
}
.article-cover{
  max-width:960px; margin:40px auto 0; aspect-ratio:21/9; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--purple-100), var(--purple-050));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.article-cover .orbit-diagram{max-width:34%;}
.is-hidden-card{display:none !important;}
.article-body{max-width:720px; margin:0 auto;}
.article-body p{color:var(--text); font-size:1.02rem;}
.article-body h2{margin-top:1.6em; font-size:1.5rem;}
.article-body h3{margin-top:1.3em; font-size:1.15rem;}
.article-body ul{color:var(--text); padding-left:1.2em; margin-bottom:1.2em;}
.article-body li{margin-bottom:.5em;}
.article-diagram{display:block; max-width:480px; margin:2em auto; height:auto;}
.article-body blockquote{
  margin:1.8em 0; padding:.2em 0 .2em 1.3em; border-left:3px solid var(--coral-500);
  font-family:var(--font-display); font-size:1.15rem; color:var(--text);
}
.article-footer-nav{
  max-width:720px; margin:56px auto 0; padding-top:28px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.author-line{
  display:flex; align-items:center; gap:12px; max-width:720px; margin:36px auto 0;
  padding-top:24px; border-top:1px solid var(--line);
}
.author-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--purple-500); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.9rem;
}
.author-line .name{font-weight:600; font-size:.92rem;}
.author-line .role{font-size:.82rem; color:var(--text-soft);}

/* ==========================================================================
   Misc utility
   ========================================================================== */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}