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

:root{
  --portfolio-orange:#ff5a1f;
  --portfolio-orange-soft:#ffd7c8;
  --portfolio-paper:#f2f0ea;
  --portfolio-paper-light:#f8f6f1;
  --portfolio-ink:#111111;
  --portfolio-muted:#8e8981;
  --portfolio-display:'Archivo Black','Arial Black',sans-serif;
  --portfolio-body:'IBM Plex Sans','Inter',system-ui,sans-serif;
  --portfolio-utility:'IBM Plex Mono','JetBrains Mono',monospace;
  --shadow-micro:0 2px 6px rgba(38,27,17,.055);
  --shadow-surface:0 4px 10px rgba(38,27,17,.065);
  --shadow-overlay:0 8px 20px rgba(48,33,22,.11);
}

body[data-page]{
  --bg:#f2f0ea;
  --bg-elev:rgba(255,255,255,.66);
  --card:rgba(255,255,255,.72);
  --line:rgba(17,17,17,.17);
  --text:#111111;
  --text-dim:#505050;
  --text-faint:#77736c;
  --accent:#ff5a1f;
  --accent-dim:#ffd7c8;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(17,17,17,.16) .65px, transparent .65px);
  background-size:22px 22px;
}

body[data-page]:not([data-page="case-softswiss"]){font-family:var(--portfolio-body);}
body[data-page]:not([data-page="case-softswiss"]) h1{font-family:var(--portfolio-display); font-weight:400;}
body[data-page]:not([data-page="case-softswiss"]) button,
body[data-page]:not([data-page="case-softswiss"]) input,
body[data-page]:not([data-page="case-softswiss"]) textarea{font-family:var(--portfolio-body);}
body[data-page] :focus-visible{
  outline:3px solid rgba(255,90,31,.72);
  outline-offset:3px;
}

body[data-page] nav,
body[data-page] .topbar{
  background:rgba(242,240,234,.84);
  border-color:var(--line);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

body[data-page] .lang-switch{height:46px; border-radius:10px; background:rgba(255,255,255,.5);}
body[data-page] .lang-switch button{height:44px; padding:0 14px; color:var(--text-faint);}
body[data-page] .lang-switch button.active{background:var(--accent); color:#fff;}
body[data-page] .nav-right,
body[data-page] .top-right{display:flex; align-items:center; gap:10px;}
body[data-page="home"] .nav-right,
body[data-page="home"] .navlinks{min-width:0;}
body[data-page="home"] .navlinks a{
  display:flex;
  align-items:center;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page] .case-close{
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); background:rgba(255,255,255,.5);
  border:1px solid var(--line); border-radius:10px;
  font:400 27px/1 var(--portfolio-body);
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
body[data-page] .case-close:hover{
  color:#fff; background:var(--portfolio-orange); border-color:var(--portfolio-orange); transform:translate(2px,-2px) rotate(4deg);
}
body[data-page="case-softswiss"] .case-close{font-family:'Inter',system-ui,-apple-system,sans-serif;}

/* Main portfolio */
body[data-page="home"] .hero{
  background:
    linear-gradient(rgba(17,17,17,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,17,.055) 1px,transparent 1px),
    linear-gradient(108deg,transparent 0 68%,rgba(255,90,31,.08) 68% 84%,transparent 84%);
  background-size:40px 40px,40px 40px,auto;
  border-bottom:1px solid rgba(17,17,17,.17);
  animation:heroCanvasDrift 20s linear infinite;
}
body[data-page="home"] .hero::before{
  top:76px; right:max(32px,calc((100vw - 1080px)/2)); bottom:auto; left:auto;
  width:min(31vw,390px); height:270px; border-radius:0;
  border:1px solid rgba(255,90,31,.45);
  background:
    linear-gradient(var(--portfolio-orange),var(--portfolio-orange)) -1px -1px/22px 2px no-repeat,
    linear-gradient(var(--portfolio-orange),var(--portfolio-orange)) -1px -1px/2px 22px no-repeat,
    linear-gradient(var(--portfolio-orange),var(--portfolio-orange)) calc(100% + 1px) calc(100% + 1px)/22px 2px no-repeat,
    linear-gradient(var(--portfolio-orange),var(--portfolio-orange)) calc(100% + 1px) calc(100% + 1px)/2px 22px no-repeat,
    repeating-linear-gradient(135deg,rgba(255,90,31,.035) 0 8px,transparent 8px 16px);
  opacity:.82;
  animation:
    reviewFrameIn .9s cubic-bezier(.2,.7,.2,1) .18s both,
    reviewFrameFloat 8s ease-in-out 1.1s infinite alternate;
}
body[data-page="home"] .hero::after{
  top:189px; right:max(164px,calc((100vw - 816px)/2)); bottom:auto; left:auto;
  width:62px; height:62px; border:1px solid rgba(17,17,17,.38); border-radius:50%;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(17,17,17,.35) 50%,transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px),rgba(17,17,17,.35) 50%,transparent calc(50% + .5px));
  opacity:.72;
  animation:
    reviewTargetIn .7s cubic-bezier(.2,.7,.2,1) .55s both,
    reviewTargetOrbit 10s ease-in-out 1.3s infinite alternate;
}
@keyframes reviewFrameIn{from{opacity:0; transform:translate(18px,-10px) rotate(1deg);}to{opacity:.82; transform:none;}}
@keyframes reviewTargetIn{from{opacity:0; transform:scale(.75);}to{opacity:.72; transform:scale(1);}}
@keyframes heroCanvasDrift{
  0%{background-position:0 0,0 0,center;}
  50%{background-position:20px 20px,-20px 20px,center;}
  100%{background-position:40px 40px,-40px 40px,center;}
}
@keyframes reviewFrameFloat{
  0%{transform:translate3d(0,0,0) rotate(0);}
  50%{transform:translate3d(-8px,5px,0) rotate(-.4deg);}
  100%{transform:translate3d(5px,-4px,0) rotate(.25deg);}
}
@keyframes reviewTargetOrbit{
  0%{transform:translate3d(0,0,0) scale(1);}
  45%{transform:translate3d(10px,-7px,0) scale(.94);}
  100%{transform:translate3d(-7px,8px,0) scale(1.06);}
}
body[data-page="home"] .hero .wrap{position:relative; z-index:2;}
body[data-page="home"] .hero .wrap::after{
  content:'PRODUCT SYSTEMS / REVIEW';
  position:absolute; right:0; top:-58px;
  color:var(--portfolio-orange); font:600 10px/1 var(--portfolio-utility);
  letter-spacing:.1em; writing-mode:vertical-rl;
}
body[data-page="home"] h1{
  color:var(--portfolio-ink);
  font-weight:400;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-wrap:balance;
}
body[data-page="home"] .eyebrow{
  color:var(--portfolio-ink);
  padding:8px 12px;
  border:1px solid var(--portfolio-ink);
  border-radius:999px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(12px);
}
body[data-page="home"] .eyebrow .dot{background:var(--portfolio-orange);}
body[data-page="home"] .btn-primary{
  color:#fff;
  background:rgba(255,90,31,.88);
  border-color:rgba(17,17,17,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 3px 8px rgba(255,90,31,.12);
}
body[data-page="home"] .btn-primary:hover{background:#ff5a1f; box-shadow:0 4px 10px rgba(255,90,31,.16);}
body[data-page="home"] .btn-secondary,
body[data-page="home"] .contact-pill{
  color:var(--portfolio-ink);
  background:rgba(255,255,255,.55);
  border-color:rgba(17,17,17,.2);
}
body[data-page="home"] .section-label{
  color:var(--portfolio-orange);
  display:flex; align-items:center; gap:12px;
  font:600 12px/1.2 var(--portfolio-utility);
  letter-spacing:.075em;
}
body[data-page="home"] .section-label::before{content:'+'; color:var(--portfolio-ink); font-size:15px;}
body[data-page="home"] .section-label::after{content:''; height:1px; flex:1; background:rgba(17,17,17,.18);}
body[data-page="home"] h1 .hero-accent{color:var(--portfolio-orange);}
body[data-page="home"] h1 .hero-accent:last-of-type{
  background:linear-gradient(transparent 72%,rgba(255,90,31,.2) 72% 94%,transparent 94%);
}
body[data-page="home"] h1 .hero-muted{color:#9d9890;}
body[data-page="home"] h1,
body[data-page="home"] h1 .hero-accent,
body[data-page="home"] h1 .hero-muted,
body[data-page="home"] .hero p.lead{
  transition:color .32s cubic-bezier(.2,.82,.2,1);
}
body[data-page="home"].palette-alt h1{color:var(--portfolio-orange);}
body[data-page="home"].palette-alt h1 .hero-accent{color:var(--portfolio-ink);}
body[data-page="home"].palette-alt h1 .hero-muted{color:#716d67;}
body[data-page="home"].palette-alt h1 .hero-accent:last-of-type{
  background:linear-gradient(transparent 72%,rgba(17,17,17,.14) 72% 94%,transparent 94%);
}
body[data-page="home"].palette-alt .hero p.lead{color:var(--portfolio-ink);}
body[data-page="home"] .hero-object{
  display:inline-flex; width:1.34em; height:.76em; margin:0 .1em; vertical-align:.025em;
  padding:0; border:0; appearance:none; font:inherit; color:inherit;
  background:none; position:relative; isolation:isolate; touch-action:manipulation;
  transform:rotate(-4deg); cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
body[data-page="home"] .hero-object::before,
body[data-page="home"] .hero-object::after{
  content:''; position:absolute; inset:-.03em; pointer-events:none;
  background:center/contain no-repeat;
  transition:opacity .32s cubic-bezier(.2,.82,.2,1);
}
body[data-page="home"] .hero-object::before{background-image:url('images/ui/toggle-off.png'); opacity:1;}
body[data-page="home"] .hero-object::after{background-image:url('images/ui/toggle-on.png'); opacity:0;}
body[data-page="home"] .hero-object.is-on{transform:rotate(2deg) translateY(-1px);}
body[data-page="home"] .hero-object.is-on::before{opacity:0;}
body[data-page="home"] .hero-object.is-on::after{opacity:1;}
body[data-page="home"] .hero-object:focus-visible{outline:2px solid var(--portfolio-orange); outline-offset:4px;}
body[data-page="home"] .eyebrow,
body[data-page="home"] .card-tag,
body[data-page="home"] .edu-school,
body[data-page="home"] .edu-date,
body[data-page="home"] .card-meta{font-family:var(--portfolio-utility);}
body[data-page="home"] .about-line{color:var(--portfolio-ink); font-weight:600; letter-spacing:-.025em;}
body[data-page="home"] .about-tags b{color:var(--portfolio-ink);}
body[data-page="home"] #about .skills-grid{margin-top:30px;}
body[data-page="home"] .skill{
  color:var(--portfolio-ink);
  background:rgba(255,255,255,.6);
  border:1px solid var(--portfolio-ink);
  border-radius:999px;
  font-weight:650;
  --skill-rotate:0deg;
  transform:translate3d(var(--scatter-x, 0px),var(--scatter-y, 0px),0) rotate(var(--skill-rotate)) rotate(var(--scatter-r, 0deg)) scale(var(--scatter-scale, 1));
  scale:1;
  transition:scale .18s cubic-bezier(.2,.8,.2,1),background .28s cubic-bezier(.2,.82,.2,1),border-color .28s cubic-bezier(.2,.82,.2,1),color .28s cubic-bezier(.2,.82,.2,1);
}
body[data-page="home"] .skill:nth-child(5n+1){--skill-rotate:-2.2deg;}
body[data-page="home"] .skill:nth-child(5n+2){--skill-rotate:1.4deg;}
body[data-page="home"] .skill:nth-child(5n+3){--skill-rotate:-.8deg;}
body[data-page="home"] .skill:nth-child(5n+4){--skill-rotate:2.1deg;}
body[data-page="home"] .skill:nth-child(3n+1){background:var(--portfolio-orange); color:#fff; border-color:var(--portfolio-orange);}
body[data-page="home"] .skill:nth-child(4n){background:var(--portfolio-ink); color:#fff;}
body[data-page="home"].palette-alt .skill:not(.skill-switch){
  color:var(--portfolio-ink); background:rgba(255,255,255,.6); border-color:var(--portfolio-ink);
}
body[data-page="home"].palette-alt .skill:nth-child(3n+2):not(.skill-switch){
  color:#fff; background:var(--portfolio-orange); border-color:var(--portfolio-orange);
}
body[data-page="home"].palette-alt .skill:nth-child(4n+1):not(.skill-switch){
  color:#fff; background:var(--portfolio-ink); border-color:var(--portfolio-ink);
}
body[data-page="home"] .skill:hover{scale:1.04;}
body[data-page="home"] .skill-switch{
  width:82px; min-height:46px; padding:0; position:relative; overflow:visible;
  background:transparent !important; border:0 !important; box-shadow:none; cursor:pointer; touch-action:manipulation;
}
body[data-page="home"] .skill-switch::before,
body[data-page="home"] .skill-switch::after{
  content:''; position:absolute; inset:-3px; pointer-events:none;
  background:center/contain no-repeat;
  transition:opacity .3s cubic-bezier(.2,.82,.2,1);
}
body[data-page="home"] .skill-switch::before{background-image:url('images/ui/toggle-off.png'); opacity:1;}
body[data-page="home"] .skill-switch::after{background-image:url('images/ui/toggle-on.png'); opacity:0;}
body[data-page="home"] .skill-switch.is-on::before{opacity:0;}
body[data-page="home"] .skill-switch.is-on::after{opacity:1;}
@media (hover:hover) and (pointer:fine){
  body[data-page="home"] .skill-switch:hover::before{opacity:0;}
  body[data-page="home"] .skill-switch:hover::after{opacity:1;}
}
body[data-page="home"] .card{
  background:rgba(250,248,241,.76);
  border:1px solid rgba(17,17,17,.42);
  box-shadow:var(--shadow-micro);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}
body[data-page="home"] .card-body{background:rgba(250,248,241,.88); box-shadow:inset 0 1px rgba(17,17,17,.24);}
body[data-page="home"] .card-img{background-color:#74716c; background-blend-mode:normal;}
body[data-page="home"] .card-img::after{background:linear-gradient(to top,rgba(17,17,17,.035),transparent 38%);}
body[data-page="home"] .card:hover{border-color:var(--portfolio-orange); box-shadow:0 4px 10px rgba(255,90,31,.09);}
body[data-page="home"] .card::before{background:linear-gradient(135deg,rgba(255,90,31,.16),transparent 52%);}
body[data-page="home"] .card::after{
  content:''; position:absolute; top:9px; right:9px; z-index:7; width:15px; height:15px;
  border-top:1px solid var(--portfolio-orange); border-right:1px solid var(--portfolio-orange);
  opacity:.72; pointer-events:none;
}
body[data-page="home"] .card-tag{color:var(--portfolio-orange); font-weight:800;}
body[data-page="home"] .card-title{color:var(--portfolio-ink);}
body[data-page="home"] .badge-view{
  color:#fff; background:var(--portfolio-ink); border-color:var(--portfolio-ink); border-radius:999px;
}
body[data-page="home"] .card:hover .badge-view{background:var(--portfolio-orange); border-color:var(--portfolio-orange);}
body[data-page="home"] .proj-nav{background:rgba(250,248,241,.9); color:var(--portfolio-ink); border-color:rgba(17,17,17,.3);}
body[data-page="home"] .proj-dots span.active{background:var(--portfolio-orange);}
body[data-page="home"] .exp-list{counter-reset:review-position;}
body[data-page="home"] .exp-row{background:rgba(255,255,255,.32); border-color:rgba(17,17,17,.18); counter-increment:review-position;}
body[data-page="home"] .exp-row::before{background:linear-gradient(90deg,rgba(255,90,31,.04),rgba(255,90,31,.16),rgba(255,90,31,.04));}
body[data-page="home"] .exp-company::before{
  content:'0' counter(review-position) ' / ';
  color:var(--portfolio-orange); font:600 10px/1 var(--portfolio-utility); letter-spacing:.05em;
}
body[data-page="home"] .exp-date{font-family:var(--portfolio-utility); font-size:11px;}
body[data-page="home"] .edu-stack-back{background:rgba(255,90,31,.1); border-color:rgba(17,17,17,.18);}
body[data-page="home"] .edu-card-front{background:rgba(255,255,255,.68); border-color:rgba(17,17,17,.18); box-shadow:var(--shadow-micro);}
body[data-page="home"] .edu-card-front::after{
  content:'REVIEWED'; position:absolute; right:15px; bottom:14px;
  color:rgba(255,90,31,.72); font:600 8px/1 var(--portfolio-utility); letter-spacing:.08em;
}
body[data-page="home"] .edu-card:hover .edu-card-front{
  border-color:var(--portfolio-orange);
  box-shadow:0 4px 9px rgba(255,90,31,.08);
}
@media (hover:none), (max-width:900px){
  body[data-page="home"] .edu-card.is-centered .edu-card-front{border-color:var(--portfolio-orange);}
}
body[data-page="home"] .edu-logo img,
body[data-page="home"] .edu-modal-logo img{
  filter:brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(355%) hue-rotate(356deg) brightness(95%) contrast(88%);
  image-rendering:auto;
  backface-visibility:hidden;
}
body[data-page="home"] .exp-overlay{color:#74716c;}
body[data-page="home"] #contact .wrap{
  position:relative; isolation:isolate; text-align:left;
  z-index:1;
}
body[data-page="home"] #contact{position:relative; overflow:hidden;}
body[data-page="home"] #contact::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 7% 28%,rgba(255,90,31,.72) 0 3px,transparent 3.5px),
    radial-gradient(circle at 14% 72%,rgba(17,17,17,.34) 0 2px,transparent 2.5px),
    radial-gradient(circle at 23% 19%,rgba(255,90,31,.38) 0 1.5px,transparent 2px),
    radial-gradient(circle at 32% 82%,rgba(255,90,31,.55) 0 2.5px,transparent 3px),
    radial-gradient(circle at 68% 16%,rgba(17,17,17,.3) 0 2px,transparent 2.5px),
    radial-gradient(circle at 77% 78%,rgba(255,90,31,.48) 0 2px,transparent 2.5px),
    radial-gradient(circle at 88% 31%,rgba(255,90,31,.7) 0 3px,transparent 3.5px),
    radial-gradient(circle at 95% 69%,rgba(17,17,17,.3) 0 1.5px,transparent 2px);
  opacity:.92;
}
body[data-page="home"] #contact .wrap::before{
  content:none;
}
body[data-page="home"] #contact .section-label{display:block; font-family:var(--portfolio-display); font-size:clamp(24px,4vw,44px); font-weight:400; line-height:1.05; color:var(--portfolio-ink); letter-spacing:-.04em; text-transform:uppercase;}
body[data-page="home"] #contact .section-label::before,
body[data-page="home"] #contact .section-label::after{display:none;}
body[data-page="home"] .contact-links{justify-content:flex-start;}
body[data-page="home"] .contact-pill:first-child{background:var(--portfolio-orange); border-color:var(--portfolio-orange); color:#fff;}
body[data-page="home"] footer{color:var(--text-faint); border-color:var(--line);}
body[data-page="home"] .modal-backdrop{
  background:rgba(255,90,31,.14);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}
body[data-page="home"] .modal-box{
  background:rgba(248,245,238,.98);
  border-color:rgba(17,17,17,.22);
  box-shadow:var(--shadow-overlay);
}
body[data-page="home"] .modal-body{background:#edeae3;}
body[data-page="home"] .modal-img-wrap{background:#575450;}
body[data-page="home"] .modal-nav{
  color:var(--portfolio-ink);
  background:rgba(255,255,255,.86);
  border-color:rgba(17,17,17,.2);
}
body[data-page="home"] .modal-nav:hover{color:#fff; background:var(--portfolio-orange);}
body[data-page="home"] .modal-title,
body[data-page="home"] .modal-count,
body[data-page="home"] .edu-modal-school,
body[data-page="home"] .edu-modal-date{font-family:var(--portfolio-utility);}

/* Case-study visual system — layout and component dimensions stay intact. */
body[data-page^="case-"]:not([data-page="case-softswiss"]){
  background-image:
    radial-gradient(circle at 85% 8%,rgba(255,90,31,.13) 0 7%,transparent 7.2%),
    radial-gradient(rgba(17,17,17,.14) .65px,transparent .65px);
  background-size:auto,22px 22px;
}
body[data-page^="case-"]:not([data-page="case-softswiss"]) h1{font-family:var(--portfolio-display); font-weight:400; letter-spacing:-.05em; color:var(--portfolio-ink); text-wrap:balance;}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .eyebrow{color:var(--portfolio-orange); font:600 11px/1.2 var(--portfolio-utility); letter-spacing:.06em;}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .intro-line{border-color:var(--portfolio-orange);}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .case-switcher{background:rgba(255,255,255,.58); border-color:rgba(17,17,17,.2); backdrop-filter:blur(12px);}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .case-switcher a:hover{background:rgba(255,90,31,.12); color:var(--portfolio-orange);}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .section-nav{background:rgba(242,240,234,.86);}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .transform-step,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .fact,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .initiative,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .impact-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .value-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .risk-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .compare-col,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .ctx-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .mini-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .info-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .stat-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .cv-card,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .result-card{
  background:rgba(255,255,255,.58);
  border-color:rgba(17,17,17,.18);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  box-shadow:var(--shadow-surface);
}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .transform-step.hi,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .chosen{
  color:var(--portfolio-orange);
  border-color:rgba(255,90,31,.5);
  background:rgba(255,90,31,.1);
}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .draft-note,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .honest-note{
  background:rgba(255,255,255,.38);
  border-color:rgba(17,17,17,.18);
}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .section-num{color:var(--portfolio-orange);}
body[data-page^="case-"]:not([data-page="case-softswiss"]) .section-num,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .section-nav,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .case-switcher,
body[data-page^="case-"]:not([data-page="case-softswiss"]) .section-label{font-family:var(--portfolio-utility);}
body[data-page^="case-"]:not([data-page="case-softswiss"]) main h2,
body[data-page^="case-"]:not([data-page="case-softswiss"]) main h3{letter-spacing:-.025em;}
body[data-page^="case-"]:not([data-page="case-softswiss"]) footer{color:var(--text-faint);}

/* Full-width horizontal stories: centred on desktop and never clipped by the content column. */
@media (min-width:901px){
  body[data-page^="case-"]:not([data-page="case-softswiss"]) .transform-line{
    width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
  body[data-page^="case-"]:not([data-page="case-softswiss"]) .transform-inner{width:max-content; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
  body[data-page="case-comfyui"] .node-fragment{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
  body[data-page="case-comfyui"] .nf-row{width:max-content; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
}

/* Consistent case-title rhythm across the editorial case studies. */
body[data-page^="case-"]:not([data-page="case-softswiss"]) header.hero.wrap{
  max-width:860px; padding-top:72px; padding-bottom:40px;
}
body[data-page^="case-"]:not([data-page="case-softswiss"]) header.hero h1{
  max-width:780px; margin:0 0 20px;
  font-size:clamp(40px,4.1vw,48px); line-height:1.06; letter-spacing:-.035em;
}
body[data-page^="case-"]:not([data-page="case-softswiss"]) header.hero .eyebrow{margin-bottom:18px;}
.brand-title{display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:20px;}
.brand-title h1{margin-bottom:0 !important;}
.case-brand-logo{height:36px; width:auto; max-width:220px; flex:0 0 auto; object-fit:contain; object-position:left center;}
body[data-page="case-softswiss"] .title-block h1{
  font-family:var(--portfolio-display); font-size:clamp(20px,2vw,26px); font-weight:400; letter-spacing:-.035em;
}
body[data-page="case-revolut"]{--accent:#ff5a1f;}
body[data-page="case-revolut"]{
  background-image:
    radial-gradient(circle at 84% 9%,rgba(34,139,76,.14) 0 7%,transparent 7.2%),
    radial-gradient(rgba(17,17,17,.14) .65px,transparent .65px);
  background-size:auto,22px 22px;
}
body[data-page="case-revolut"] h1,
body[data-page="case-revolut"] .value-card .v-title{color:#0b3b1d;}
body[data-page="case-strava"]{--accent:#fc5200;}
body[data-page="case-strava"] .case-brand-logo{height:38px;}
body[data-page="case-comfyui"] .node-fragment{
  background:rgba(255,255,255,.34);
  border-color:rgba(17,17,17,.17);
  border-radius:16px;
  padding-top:22px;
  padding-bottom:22px;
}
body[data-page="case-comfyui"] .nf-node{
  background:rgba(255,255,255,.72);
  border-color:rgba(17,17,17,.2);
  box-shadow:var(--shadow-micro);
}
body[data-page="case-comfyui"] .nf-node .nf-title{color:var(--portfolio-ink);}
body[data-page="case-comfyui"] .nf-node .nf-sub{color:var(--text-faint);}

/* Casino Platform: colour treatment only. */
body[data-page="case-softswiss"]{
  --bg:#f2f0ea;
  --bg-elev:rgba(255,255,255,.78);
  --card:#fffaf5;
  --line:rgba(17,17,17,.18);
  --text:#111111;
  --text-dim:#52504c;
  --text-faint:#77736c;
  --accent:#ff5a1f;
  background-image:none;
}
body[data-page="case-softswiss"] .col-map{background:#74716C;}
body[data-page="case-softswiss"] .map-heading{color:rgba(255,255,255,.72);}
body[data-page="case-softswiss"] .band-header .rule{background:rgba(255,255,255,.36);}
body[data-page="case-softswiss"] .band-header .label{color:#fff;}
body[data-page="case-softswiss"] .node{
  background:linear-gradient(145deg,color-mix(in srgb,var(--stage-color) 20%,#fff),color-mix(in srgb,var(--stage-color) 9%,#fff)) !important;
  border-color:color-mix(in srgb,var(--stage-color) 58%,#fff) !important;
  box-shadow:0 2px 5px rgba(25,22,19,.09);
}
body[data-page="case-softswiss"] .node .nt{color:#171615;}
body[data-page="case-softswiss"] .node .nk{color:#55514c;}
body[data-page="case-softswiss"] .config-preview{
  margin:18px 0 22px; padding:12px; border:1px solid rgba(17,17,17,.16); border-radius:14px;
  background:#25262a; color:#f5f6f7; display:grid; grid-template-columns:82px 1fr 118px; gap:10px;
  box-shadow:0 4px 10px rgba(17,17,17,.08);
}
body[data-page="case-softswiss"] .config-sidebar{border-right:1px solid #3b3d42; padding-right:8px;}
body[data-page="case-softswiss"] .config-logo{font-size:8px; font-weight:800; letter-spacing:.04em; margin-bottom:12px;}
body[data-page="case-softswiss"] .config-menu{font-size:7px; color:#aeb1b7; padding:5px 4px; border-radius:4px; margin-bottom:3px;}
body[data-page="case-softswiss"] .config-menu.active{color:#fff; background:#41434a;}
body[data-page="case-softswiss"] .config-editor{padding:2px 0;}
body[data-page="case-softswiss"] .config-title{font-size:10px; font-weight:800; margin-bottom:9px;}
body[data-page="case-softswiss"] .config-layouts{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:10px;}
body[data-page="case-softswiss"] .config-layouts span{height:26px; border:1px solid #555861; border-radius:4px; background:#34363c;}
body[data-page="case-softswiss"] .config-layouts span.on{border-color:#5ba8ff; box-shadow:inset 0 0 0 1px #5ba8ff;}
body[data-page="case-softswiss"] .config-control{height:18px; border-radius:4px; background:#34363c; margin:5px 0; position:relative;}
body[data-page="case-softswiss"] .config-control::after{content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:#5ba8ff; right:7px; top:5px;}
body[data-page="case-softswiss"] .config-phone{border:4px solid #34363c; border-radius:18px; padding:7px; background:#11142a; min-height:164px;}
body[data-page="case-softswiss"] .config-phone-head{height:12px; border-radius:5px; background:linear-gradient(90deg,#5ba8ff,#b36bff); margin-bottom:8px;}
body[data-page="case-softswiss"] .config-banner{height:50px; border-radius:7px; background:linear-gradient(135deg,#3a146a,#9b40f3 62%,#ff6d8f); margin-bottom:6px;}
body[data-page="case-softswiss"] .config-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:4px;}
body[data-page="case-softswiss"] .config-tiles span{height:34px; border-radius:5px; background:linear-gradient(145deg,#163a74,#5a24a0);}
@media(max-width:520px){body[data-page="case-softswiss"] .config-preview{grid-template-columns:64px 1fr;} body[data-page="case-softswiss"] .config-phone{grid-column:1/-1; min-height:132px;}}
body[data-page="case-softswiss"] .col-detail{background:#f8f6f1;}
body[data-page="case-softswiss"] .band-card{box-shadow:var(--shadow-surface);}
body[data-page="case-softswiss"] .case-switcher{background:rgba(255,255,255,.6);}
body[data-page="case-softswiss"] .case-switcher a:hover,
body[data-page="case-softswiss"] .zoom-controls button:hover{
  color:var(--portfolio-orange);
  border-color:var(--portfolio-orange);
  background:rgba(255,90,31,.1);
}
body[data-page="case-softswiss"] .zoom-controls button.active{
  color:var(--portfolio-orange);
  border-color:var(--portfolio-orange);
}
body[data-page="case-softswiss"] .compare-col.chosen .tag{background:rgba(255,90,31,.12);}
body[data-page] .disclaimer-banner{background:#ffe2d6; color:#55200d; border-color:#ffc0a8;}

body[data-page="case-registration"] #errors .stepflow{
  display:grid;
  gap:14px;
  margin-top:20px;
  max-width:780px;
}
body[data-page="case-registration"] #errors .step{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:start;
  column-gap:12px;
}
body[data-page="case-registration"] #errors .snum{
  color:var(--portfolio-orange);
  font:600 15px/1.6 var(--portfolio-utility);
}
body[data-page="case-registration"] #errors .step-text{
  min-width:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-dim);
}

@media (max-width:1144px){
  body[data-page="home"] #contact .wrap::before{left:0; right:0;}
}

@media (max-width:900px) and (min-width:641px){
  body[data-page="home"] nav .wrap{gap:16px;}
  body[data-page="home"] .nav-right{gap:14px;}
  body[data-page="home"] .navlinks{gap:14px;}
  body[data-page="home"] .navlinks a{max-width:78px;}
}

@media (max-width:640px){
  body[data-page^="case-"] .navwrap{padding-left:18px; padding-right:18px; gap:8px;}
  body[data-page^="case-"] .nav-right{gap:6px;}
  body[data-page="home"] .hero::before{right:-78px; width:240px; height:220px; opacity:.5;}
  body[data-page="home"] .hero::after{right:28px; top:162px; width:48px; height:48px; opacity:.48;}
  body[data-page="home"] .hero .wrap::after{display:none;}
  body[data-page="home"] .section-label{gap:9px;}
  body[data-page="home"] #contact::before{
    background:
      radial-gradient(circle at 6% 22%,rgba(255,90,31,.7) 0 2.5px,transparent 3px),
      radial-gradient(circle at 13% 78%,rgba(17,17,17,.3) 0 1.5px,transparent 2px),
      radial-gradient(circle at 88% 19%,rgba(255,90,31,.62) 0 2px,transparent 2.5px),
      radial-gradient(circle at 95% 73%,rgba(17,17,17,.28) 0 1.5px,transparent 2px);
  }
  body[data-page="home"] #contact .wrap::before{inset:-20px 0; border-radius:18px;}
  body[data-page^="case-"]:not([data-page="case-softswiss"]) header.hero.wrap{padding:52px 20px 34px;}
  body[data-page^="case-"]:not([data-page="case-softswiss"]) header.hero h1{font-size:32px; line-height:1.08;}
  .brand-title{gap:14px; margin-bottom:20px;}
  .case-brand-logo{height:32px; max-width:190px;}
  body[data-page="case-revolut"] .brand-title .case-brand-logo{height:32px;}
  body[data-page="case-strava"] .brand-title .case-brand-logo{height:32px; max-width:190px;}
}

@media (max-width:380px){
  body[data-page^="case-"] .navwrap{padding-left:12px; padding-right:12px; gap:4px;}
  body[data-page^="case-"] .nav-right{gap:4px;}
  body[data-page^="case-"] .case-switcher .case-home{padding-left:8px; padding-right:8px;}
  body[data-page^="case-"] .lang-switch button{min-width:44px; padding-left:8px; padding-right:8px;}
}

@media (prefers-reduced-motion:reduce){
  body[data-page="home"] .hero,
  body[data-page="home"] .hero::before,
  body[data-page="home"] .hero::after{animation:none !important;}
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}