/* Transformation — "Flow" (iris → lilac, curves) */
body{ background:radial-gradient(90% 50% at 10% 0%,rgba(122,90,214,.18),transparent 60%) var(--ink-0); }

/* Hero — two columns: copy left, spiral right (no overlap at any size) */
.tx-hero{ position:relative; overflow:hidden; }
.tx-hero-inner{ position:relative; min-height:100svh; padding-top:calc(var(--nav-h) + 26px); padding-bottom:clamp(40px,8vh,96px);
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); grid-template-rows:auto 1fr auto; column-gap:clamp(24px,4vw,70px); row-gap:clamp(18px,3vh,30px); align-items:center; }
.tx-hero-inner > .crumbs{ grid-column:1 / -1; align-self:start; }
.tx-title{ position:relative; z-index:3; grid-column:1; grid-row:2; font-size:clamp(2.6rem,min(6vw,12svh),7.2rem); }
.tx-title > span{ display:block; }
.tx-title .tt-b{ padding-left:clamp(0px,5vw,90px); }
.tx-title .serif{ font-size:1.05em; }
.spiral-wrap{ position:relative; z-index:1; grid-column:2; grid-row:2 / span 2; justify-self:center; width:100%; max-width:min(520px,62svh); aspect-ratio:1; }
.spiral{ position:absolute; inset:9%; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--line-2),0 60px 140px -40px rgba(122,90,214,.7); }
.spiral img{ width:100%; height:100%; object-fit:cover; transform:scale(1.25); }
.spiral::after{ opacity:.9; }
.spiral-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.spiral-ring text{ font-family:var(--f-mono); font-size:6.2px; letter-spacing:.32em; text-transform:uppercase; fill:var(--fog); }
.tx-hero-foot{ position:relative; z-index:3; grid-column:1; grid-row:3; display:grid; gap:26px; max-width:620px; }
.tx-hero-foot .lead{ color:var(--bone-2); }
.tx-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){
  .tx-hero-inner{ grid-template-columns:1fr; grid-template-rows:auto; }
  .tx-title, .tx-hero-foot, .spiral-wrap{ grid-column:1; grid-row:auto; }
  .spiral-wrap{ width:min(80vw,420px); }
  .tx-title .tt-b{ padding-left:0; }
}

/* Network sequence */
.tx-seq-stage{ position:relative; height:100vh; overflow:hidden; display:grid; place-items:center; }
.net{ position:absolute; inset:0; width:100%; height:100%; }
.net line{ stroke:url(#ng); stroke:var(--accent-2); stroke-width:1.2; opacity:.65; vector-effect:non-scaling-stroke; }
.net circle{ fill:var(--bone); }
.net circle.hub{ fill:url(#ng); fill:var(--accent); }
.tx-lines{ position:relative; z-index:3; width:100%; font-size:clamp(2.2rem,min(6.4vw,11svh),6.8rem); text-align:center; }
.tx-l{ position:absolute; left:0; right:0; top:0; font-size:inherit; padding:0 var(--gutter); }
.tx-l .serif{ color:var(--accent-2); }
.tx-seq-stage::after{ content:""; position:absolute; inset:0; background:radial-gradient(40% 35% at 50% 50%,rgba(5,5,9,.85),transparent 80%); pointer-events:none; z-index:2; }

/* Accordion */
.acc{ border-top:1px solid var(--line-2); }
.acc-item{ border-bottom:1px solid var(--line-2); }
.acc-item summary{ list-style:none; display:grid; grid-template-columns:70px 1fr 50px; align-items:center; gap:20px; padding:30px 0; cursor:pointer; }
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary .mono{ font-size:.72rem; color:var(--dim); }
.acc-item summary .h3{ font-size:clamp(1.5rem,3.2vw,3rem); transition:color .4s, transform .6s var(--ease); }
.acc-item summary:hover .h3{ transform:translateX(12px); color:var(--accent-2); }
.acc-ico{ position:relative; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); justify-self:end; transition:background .4s, transform .6s var(--ease); }
.acc-ico::before, .acc-ico::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px; margin:-.75px 0 0 -7px; background:var(--bone); transition:transform .5s var(--ease); }
.acc-ico::after{ transform:rotate(90deg); }
.acc-item[open] .acc-ico{ background:var(--grad); border-color:transparent; transform:rotate(180deg); }
.acc-item[open] .acc-ico::after{ transform:rotate(0); }
.acc-body{ display:grid; grid-template-columns:70px 280px 1fr; gap:20px; padding:0 0 36px; align-items:center; }
.acc-body::before{ content:""; }
.acc-img{ height:180px; border-radius:16px; }
.acc-body p{ color:var(--fog); font-size:1.1rem; margin-bottom:16px; max-width:46ch; }
@media (max-width:760px){
  .acc-item summary{ grid-template-columns:40px 1fr 46px; }
  .acc-body{ grid-template-columns:1fr; }
  .acc-body::before{ display:none; }
}

/* Panorama */
.tx-pano-stage{ position:relative; height:100vh; overflow:hidden; display:flex; align-items:center; }
.pano-img{ position:absolute; inset:0; }
.pano-img img{ position:absolute; top:0; left:0; height:100%; width:150%; max-width:none; object-fit:cover; }
.pano-img.grade::before{ background:linear-gradient(180deg,rgba(5,5,9,.75),rgba(5,5,9,.35) 40%,rgba(5,5,9,.8)); }
.pano-copy{ position:relative; z-index:3; }
.pano-copy .h2{ margin:22px 0 60px; max-width:14ch; }
.pano-copy .serif{ color:var(--accent-2); }
.pano-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.ps{ display:flex; flex-direction:column; gap:10px; padding-top:26px; }
.ps .mono{ font-size:.66rem; color:var(--accent-2); }
.ps p{ color:var(--bone-2); opacity:.8; }
.pano-line{ position:relative; height:1px; background:rgba(255,255,255,.2); margin-top:-1px; order:-1; }
.pano-line i{ position:absolute; inset:0; background:var(--grad); transform-origin:left; transform:scaleX(0); }
.pano-copy{ display:flex; flex-direction:column; }
.pano-copy .pano-line{ order:3; margin-top:40px; }
@media (max-width:900px){ .pano-steps{ grid-template-columns:1fr 1fr; } .tx-pano-stage{ height:auto; padding:120px 0; } }

/* Before / after */
.ba{ position:relative; height:min(70vh,640px); border-radius:28px; overflow:hidden; --pos:50%; user-select:none; touch-action:pan-y; }
.ba-after, .ba-before{ position:absolute; inset:0; }
.ba-after{ border-radius:0; }
.ba-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-before .media{ position:absolute; inset:0; border-radius:0; }
.ba-before img{ filter:grayscale(.6) contrast(1.1) !important; }
.ba-tag{ position:absolute; z-index:4; top:22px; padding:9px 14px; border-radius:999px; background:rgba(9,9,26,.82); border:1px solid var(--line-2); font-size:.64rem; }
.ba-after .ba-tag{ right:22px; } .ba-before .ba-tag{ left:22px; }
.ba-handle{ position:absolute; z-index:5; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff; cursor:ew-resize; }
.ba-handle i{ position:absolute; top:50%; left:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:var(--grad); box-shadow:0 0 0 6px rgba(255,255,255,.12),0 10px 40px rgba(0,0,0,.5); }
.ba-handle i::before, .ba-handle i::after{ content:""; position:absolute; top:50%; width:8px; height:8px; border-top:1.5px solid #fff; border-left:1.5px solid #fff; margin-top:-4px; }
.ba-handle i::before{ left:15px; transform:rotate(-45deg); } .ba-handle i::after{ right:15px; transform:rotate(135deg); }
.tx-gains{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 30px; margin-top:70px; }
.tx-gains > div{ padding-top:22px; border-top:1px solid var(--line-2); display:grid; gap:8px; }
.tx-gains p{ color:var(--fog); }
@media (max-width:900px){ .tx-gains{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .tx-gains{ grid-template-columns:1fr; } }

@media (max-width:600px){
  .ba-after .ba-tag{ top:auto; bottom:22px; }
  .ba{ height:58vh; }
}