/* =========================================================
   PHASE 3A
   Featured case studies, technology ecosystem, Why Markone
   ========================================================= */

.case-studies-section{
  position:relative;
  overflow:clip;
  padding:145px 0 170px;
  background:var(--bg);
}
.case-studies-aurora{
  position:absolute;
  top:0;
  left:50%;
  width:1100px;
  height:700px;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 25% 30%,rgba(124,58,237,.19),transparent 35%),
    radial-gradient(circle at 72% 35%,rgba(14,165,233,.12),transparent 34%),
    radial-gradient(circle at 50% 78%,rgba(236,72,153,.10),transparent 33%);
  filter:blur(75px);
  pointer-events:none;
}
.case-studies-intro{
  position:relative;
  z-index:2;
  margin-bottom:105px;
}
.case-studies-list{
  position:relative;
  z-index:2;
  display:grid;
  gap:130px;
}
.case-study{
  --case-accent:#7c3aed;
  --case-accent-rgb:124,58,237;
  position:relative;
  min-height:690px;
  display:grid;
  grid-template-columns:.76fr 1.24fr;
  align-items:center;
  gap:75px;
  padding:74px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:40px;
  background:
    radial-gradient(circle at 83% 30%,rgba(var(--case-accent-rgb),.13),transparent 31%),
    linear-gradient(145deg,var(--surface),var(--surface-soft));
  box-shadow:0 35px 90px rgba(15,23,42,.08);
}
[data-theme="dark"] .case-study{
  box-shadow:0 40px 110px rgba(0,0,0,.28);
}
.case-study.reverse{
  grid-template-columns:1.24fr .76fr;
}
.case-study.reverse .case-copy{order:2}
.case-study.reverse .case-visual{order:1}
.case-soundhealth{--case-accent:#0690d6;--case-accent-rgb:6,144,214}
.case-spatial{--case-accent:#8b5cf6;--case-accent-rgb:139,92,246}
.case-triq{--case-accent:#a96834;--case-accent-rgb:169,104,52}
.case-daffodils{--case-accent:#d59b20;--case-accent-rgb:213,155,32}
.case-kshema{--case-accent:#a379fe;--case-accent-rgb:163,121,254}
.case-markone{--case-accent:#6d4aff;--case-accent-rgb:109,74,255}

.case-copy{
  position:relative;
  z-index:5;
}
.case-meta{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:24px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.case-meta span:first-child{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid rgba(var(--case-accent-rgb),.24);
  border-radius:50%;
  color:var(--case-accent);
  background:rgba(var(--case-accent-rgb),.09);
}
.case-copy h3{
  margin:0;
  font:800 clamp(44px,3vw,72px)/.98 var(--font-heading);
  letter-spacing:-.06em;
}
.case-copy>p{
  max-width:510px;
  margin:25px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}
.case-services{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:27px;
}
.case-services span{
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:99px;
  color:var(--text);
  background:var(--surface-glass);
  font-size:9px;
  font-weight:700;
}
.case-results{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:34px 0;
}
.case-results>div{
  min-width:0;
  padding:16px 12px;
  border-top:1px solid var(--line);
}
.case-results strong,
.case-results span{display:block}
.case-results strong{
  color:var(--case-accent);
  font:800 27px var(--font-heading);
  letter-spacing:-.04em;
}
.case-results span{
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.case-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--text);
  font-size:13px;
  font-weight:800;
}
.case-link svg{
  width:17px;
  transition:.25s ease;
}
.case-link:hover{color:var(--case-accent)}
.case-link:hover svg{transform:translate(3px,-3px)}

.case-visual{
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center;
  perspective:1400px;
}
.case-gradient-orb{
  position:absolute;
  width:440px;
  height:440px;
  border-radius:50%;
  background:rgba(var(--case-accent-rgb),.18);
  filter:blur(75px);
}
.device-laptop{
  position:relative;
  z-index:2;
  width:min(100%,720px);
  transform-style:preserve-3d;
  will-change:transform;
}
.laptop-screen{
  position:relative;
  height:425px;
  overflow:hidden;
  border:8px solid #11131a;
  border-radius:18px 18px 10px 10px;
  background:#fff;
  box-shadow:0 35px 75px rgba(9,12,20,.3);
}
.laptop-base{
  position:relative;
  width:108%;
  height:18px;
  left:-4%;
  border-radius:3px 3px 18px 18px;
  background:linear-gradient(#d7d9df,#9298a6);
  box-shadow:0 13px 22px rgba(0,0,0,.18);
}
.laptop-base::after{
  content:"";
  position:absolute;
  left:43%;
  top:0;
  width:14%;
  height:5px;
  border-radius:0 0 8px 8px;
  background:#7f8490;
}
.device-phone{
  position:absolute;
  z-index:5;
  right:-2%;
  bottom:-5%;
  width:154px;
  height:315px;
  padding:6px;
  overflow:hidden;
  border-radius:27px;
  background:#101117;
  box-shadow:0 28px 50px rgba(0,0,0,.28);
  will-change:transform;
}
.device-notch{
  position:absolute;
  z-index:3;
  top:10px;
  left:50%;
  width:48px;
  height:13px;
  transform:translateX(-50%);
  border-radius:99px;
  background:#101117;
}
.mobile-shop{
  height:100%;
  padding:29px 13px 14px;
  border-radius:22px;
  color:#fff;
  background:radial-gradient(circle at 50% 30%,#51409d,#171625 65%);
  text-align:center;
}
.mobile-shop strong{font-size:10px;letter-spacing:.15em}
.mobile-product-ring{
  width:94px;
  height:94px;
  margin:26px auto 18px;
  border:9px solid #252239;
  border-top-color:#9f8cff;
  border-radius:50%;
  box-shadow:0 0 35px rgba(159,140,255,.38);
}
.mobile-shop small{display:block;color:#bfb8df;font-size:7px}
.mobile-shop h5{margin:5px 0 14px;font:800 16px var(--font-heading)}
.mobile-shop button{
  width:100%;
  padding:9px;
  border:0;
  border-radius:9px;
  color:#1a1530;
  background:#fff;
  font-size:8px;
  font-weight:800;
}
.case-float-card{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  border:1px solid rgba(var(--case-accent-rgb),.2);
  border-radius:16px;
  background:var(--surface-glass);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-md);
  will-change:transform;
}
.case-float-card>svg{
  width:36px;
  height:36px;
  padding:8px;
  border-radius:11px;
  color:var(--case-accent);
  background:rgba(var(--case-accent-rgb),.12);
}
.case-float-card small,
.case-float-card strong{display:block}
.case-float-card small{color:var(--muted);font-size:7px}
.case-float-card strong{font:800 10px var(--font-heading)}
.float-research{left:-3%;top:14%}
.float-audio{right:-2%;bottom:10%}
.float-payment{left:-2%;bottom:9%}
.float-security{right:-1%;top:12%}
.float-growth{right:-2%;bottom:12%}

/* miniature project interfaces */
.site-header,.spatial-nav,.triq-nav,.school-nav,.energy-nav,.markone-nav{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:7px;
}
.site-header strong,.spatial-nav strong,.triq-nav strong,.school-nav strong,.energy-nav strong,.markone-nav strong{
  font:800 11px var(--font-heading);
  letter-spacing:.1em;
}
.site-header b,.spatial-nav b,.triq-nav b,.school-nav b,.energy-nav b,.markone-nav b{
  padding:7px 9px;
  border-radius:7px;
  font-size:6px;
}
.soundhealth-screen{color:#fff;background:#151326}
.site-header b{color:#201936;background:#fff}
.soundhealth-hero{
  position:relative;
  min-height:288px;
  padding:44px 36px;
  background:
    radial-gradient(circle at 78% 48%,rgba(150,126,255,.75),transparent 13%),
    radial-gradient(circle at 78% 48%,rgba(123,92,234,.25),transparent 30%);
}
.soundhealth-hero small,.spatial-hero small,.triq-hero small,.school-hero small,.energy-hero small,.markone-hero small{
  font-size:6px;
  font-weight:800;
  letter-spacing:.15em;
}
.soundhealth-hero h4,.spatial-hero h4,.triq-hero h4,.school-hero h4,.energy-hero h4,.markone-hero h4{
  margin:11px 0;
  font:800 34px/.98 var(--font-heading);
  letter-spacing:-.05em;
}
.soundhealth-hero p,.spatial-hero p,.triq-hero p,.markone-hero p{
  max-width:245px;
  color:#c5bed8;
  font-size:7px;
  line-height:1.6;
}
.soundhealth-hero button,.triq-hero button,.school-hero button,.energy-hero button,.markone-hero button{
  margin-top:13px;
  padding:8px 11px;
  border:0;
  border-radius:8px;
  font-size:6px;
  font-weight:800;
}
.sound-wave{
  position:absolute;
  right:29px;
  bottom:45px;
  display:flex;
  align-items:center;
  gap:5px;
  height:90px;
}
.sound-wave i{
  display:block;
  width:4px;
  border-radius:99px;
  background:linear-gradient(#9a83ff,#4e3d9a);
  animation:caseWave 1.5s ease-in-out infinite;
}
.sound-wave i:nth-child(1),.sound-wave i:nth-child(7){height:20px}
.sound-wave i:nth-child(2),.sound-wave i:nth-child(6){height:47px;animation-delay:-.3s}
.sound-wave i:nth-child(3),.sound-wave i:nth-child(5){height:72px;animation-delay:-.6s}
.sound-wave i:nth-child(4){height:90px;animation-delay:-.9s}
@keyframes caseWave{50%{transform:scaleY(.6);opacity:.6}}
.soundhealth-stats,.spatial-footer,.triq-benefits,.energy-metrics,.markone-dashboard{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:15px 20px;
  font-size:6px;
}
.soundhealth-stats b,.energy-metrics b,.markone-dashboard b{display:block;font-size:10px}

.spatial-screen{color:#fff;background:#090a13}
.spatial-nav b{background:#8769ff}
.spatial-hero{
  min-height:312px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:35px;
  background:radial-gradient(circle at 74% 50%,rgba(107,75,229,.32),transparent 34%);
}
.spatial-orbit{
  position:relative;
  width:200px;height:200px;margin:auto;
  display:grid;place-items:center;
}
.spatial-orbit>i{
  position:absolute;inset:0;border:1px solid rgba(154,131,255,.35);border-radius:50%;
}
.spatial-orbit>i:nth-child(2){inset:25px}
.spatial-orbit>i:nth-child(3){inset:51px}
.spatial-orbit span{
  width:65px;height:65px;display:grid;place-items:center;
  border-radius:50%;color:#fff;background:#7c5dea;box-shadow:0 0 50px #795ee5;
}
.spatial-orbit svg{width:25px}
.spatial-footer{border-top:1px solid rgba(255,255,255,.1);color:#c8c3dc;text-align:center}

.triq-screen{color:#422939;background:#fff7fa}
.triq-nav{border-color:#eadce3}
.triq-nav b{color:#fff;background:#dc4f87}
.triq-hero{
  min-height:310px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  padding:34px;
  background:radial-gradient(circle at 80% 40%,#ffd7e5,transparent 38%);
}
.triq-hero p{color:#735a68}
.triq-hero button{color:#fff;background:#dc4f87}
.triq-products{
  position:relative;
  width:195px;height:230px;margin:auto;
}
.triq-products i{
  position:absolute;bottom:10px;width:58px;height:160px;border-radius:18px 18px 8px 8px;
  background:linear-gradient(145deg,#f7c4d5,#d84f84);
  box-shadow:0 20px 30px rgba(121,42,74,.14);
}
.triq-products i:nth-child(1){left:18px;transform:rotate(-8deg)}
.triq-products i:nth-child(2){left:68px;height:190px;z-index:2}
.triq-products i:nth-child(3){right:10px;transform:rotate(8deg)}
.triq-products span{position:absolute;z-index:3;left:79px;bottom:92px;color:#fff;font-size:9px;font-weight:800}
.triq-benefits{color:#765c69;border-top:1px solid #eadce3;text-align:center}

.school-screen{color:#fff;background:#1d3550}
.school-nav b{color:#32230a;background:#e8b84e}
.school-hero{
  min-height:300px;
  padding:52px 37px;
  background:
    linear-gradient(90deg,rgba(20,43,66,.95),rgba(20,43,66,.38)),
    radial-gradient(circle at 78% 36%,#e9bd66,transparent 20%);
}
.school-hero button{color:#2e2109;background:#eab84e}
.school-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:15px 19px;
  background:#fff;color:#243a50;font-size:6px;
}
.school-features span{display:flex;align-items:center;gap:6px}
.school-features svg{width:15px;color:#c99225}
.portal-card{
  position:absolute;z-index:6;right:-2%;bottom:-2%;
  width:225px;padding:16px;border:1px solid rgba(213,155,32,.24);
  border-radius:17px;background:var(--surface-glass);backdrop-filter:blur(18px);box-shadow:var(--shadow-md);
}
.portal-card>div{display:flex;align-items:center;gap:9px}
.portal-card>div svg{width:32px;height:32px;padding:8px;border-radius:9px;color:#c68b18;background:rgba(213,155,32,.12)}
.portal-card small,.portal-card strong{display:block}
.portal-card small{font-size:7px;color:var(--muted)}
.portal-card strong{font-size:9px}
.portal-card label{display:block;margin:13px 0 5px;color:var(--muted);font-size:6px}
.portal-input{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:7px}
.portal-input b{padding:5px 7px;border-radius:6px;color:#fff;background:#c78c1b}
.portal-result{display:flex!important;align-items:center;gap:5px;margin-top:9px;color:#16a34a!important}
.portal-result svg{width:11px}

.energy-screen{color:#fff;background:#0c251b}
.energy-nav b{color:#143425;background:#9ee2aa}
.energy-hero{
  min-height:310px;
  display:grid;
  grid-template-columns:1fr .9fr;
  align-items:center;
  padding:35px;
  background:radial-gradient(circle at 80% 35%,rgba(70,181,103,.4),transparent 35%);
}
.energy-hero button{color:#123323;background:#a9e8b3}
.energy-turbines{
  position:relative;
  height:220px;
}
.energy-turbines i{
  position:absolute;bottom:15px;width:4px;height:125px;background:#d8f2df;
}
.energy-turbines i::before{
  content:"";position:absolute;top:0;left:50%;width:80px;height:80px;
  border:3px solid #d8f2df;border-radius:50%;transform:translate(-50%,-50%);
  clip-path:polygon(45% 0,55% 0,100% 45%,100% 55%,55% 100%,45% 100%,0 55%,0 45%);
}
.energy-turbines i:nth-child(1){left:35px;height:95px}
.energy-turbines i:nth-child(2){left:105px;height:150px}
.energy-turbines i:nth-child(3){right:15px;height:115px}
.energy-metrics{border-top:1px solid rgba(255,255,255,.1)}

.markone-screen{color:#fff;background:#090a12}
.markone-nav b{background:#7555f0}
.markone-hero{
  min-height:310px;
  padding:43px 37px;
  background:
    radial-gradient(circle at 77% 40%,rgba(123,80,246,.55),transparent 16%),
    radial-gradient(circle at 77% 40%,rgba(75,49,151,.25),transparent 36%);
}
.markone-hero button{color:#fff;background:#7555f0}
.markone-dashboard{border-top:1px solid rgba(255,255,255,.1);color:#c7c1d8}

/* Technology */

.tech-markone{
    max-width: 80px;
    width: 100%;
    filter: brightness(4.5);
}
.technology-section{
  position:relative;
  overflow:hidden;
  padding:150px 0;
  color:#fff;
  background:#070812;
}
.technology-noise{
  position:absolute;
  inset:0;
  opacity:.42;
  background:
    radial-gradient(circle at 22% 30%,rgba(124,58,237,.25),transparent 28%),
    radial-gradient(circle at 78% 70%,rgba(14,165,233,.16),transparent 27%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,auto,55px 55px,55px 55px;
}
.technology-intro{position:relative;z-index:2;margin-bottom:90px}
.technology-intro>p{color:#9ca3b5}
.technology-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:70px;
  align-items:center;
}
.technology-network{
  position:relative;
  min-height:650px;
}
.technology-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.technology-lines path{
  fill:none;
  stroke:rgba(153,123,255,.19);
  stroke-width:1.5;
  stroke-dasharray:6 9;
  transition:.35s ease;
}
.technology-network:has(.tech-node:hover) .technology-lines path{
  stroke:rgba(153,123,255,.34);
}
.tech-node{
  position:absolute;
  z-index:2;
  width:105px;
  height:105px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:0;
  border:1px solid rgba(255,255,255,.11);
  border-radius:27px;
  color:#a8adbd;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 40px rgba(0,0,0,.16);
  cursor:pointer;
  transition:.3s ease;
}
.tech-node svg{width:25px;height:25px}
.tech-node strong{font-size:8px;letter-spacing:.03em}
.tech-node:hover,.tech-node.active{
  color:#fff;
  border-color:rgba(150,116,255,.55);
  background:rgba(124,58,237,.17);
  box-shadow:0 0 45px rgba(124,58,237,.2);
  transform:translateY(-7px) scale(1.04);
}
.tech-center{
  top:50%;left:50%;
  width:154px;height:154px;
  transform:translate(-50%,-50%);
  border-color:rgba(153,123,255,.5);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8f70ff,#4930a3 62%,#251b55);
  color:#fff;
  box-shadow:0 0 70px rgba(124,58,237,.35);
}
.tech-center:hover,.tech-center.active{transform:translate(-50%,-50%) scale(1.04)}
.tech-center span{font:800 31px var(--font-heading)}
.tech-center strong{font-size:9px}
.tech-wordpress{left:14%;top:7%}
.tech-shopify{left:43%;top:0}
.tech-react{right:9%;top:8%}
.tech-laravel{right:0;top:41%}
.tech-nodejs{right:11%;bottom:1%}
.tech-php{left:43%;bottom:-2%}
.tech-mysql{left:16%;bottom:2%}
.tech-aws{left:0;top:42%}
.tech-cloudflare{left:28%;top:30%}
.tech-github{right:26%;top:30%}
.tech-figma{left:28%;bottom:22%}
.tech-vercel{right:27%;bottom:21%}
.technology-detail{
  min-height:440px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:45px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(23px);
}

@media (max-width:1180px){
    .technology-detail{
        
        display: none;
    }
    
}
.technology-detail-index{
  align-self:flex-end;
  color:#747b90;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}
.technology-detail-icon{
  width:64px;height:64px;display:grid;place-items:center;margin-top:10px;
  border:1px solid rgba(153,123,255,.35);border-radius:19px;
  color:#a98cff;background:rgba(124,58,237,.13);
}
.technology-detail-icon svg{width:27px}
.technology-detail small{
  margin-top:28px;color:#9e84ff;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.technology-detail h3{
  margin:10px 0 17px;font:800 37px/1.05 var(--font-heading);letter-spacing:-.045em;
}
.technology-detail p{margin:0;color:#9ca3b5;font-size:14px;line-height:1.8}
.technology-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.technology-tags span{
  padding:7px 9px;border:1px solid rgba(255,255,255,.1);border-radius:99px;
  color:#c5cad7;background:rgba(255,255,255,.035);font-size:8px;font-weight:700;
}

/* Why Markone */
.why-section{
  position:relative;
  padding:145px 0 165px;
  background:var(--surface);
}
.why-intro{margin-bottom:90px}
.why-panels{
  border-top:1px solid var(--line);
}
.why-panel{
  --why-progress:0%;
  position:relative;
  display:grid;
  grid-template-columns:65px 75px 1fr 170px 34px;
  gap:25px;
  align-items:center;
  min-height:132px;
  padding:30px 8px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:min-height .4s ease,padding .4s ease;
}
.why-panel::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at var(--why-progress) 50%,rgba(124,58,237,.15),transparent 26%),
    linear-gradient(90deg,rgba(124,58,237,.06),transparent);
  transition:.35s ease;
}
.why-panel:hover::before,.why-panel.active::before{opacity:1}
.why-panel.active{min-height:180px;padding-block:45px}
.why-index{
  position:relative;
  z-index:2;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}
.why-icon{
  position:relative;
  z-index:2;
  width:55px;height:55px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:17px;color:var(--primary);
  background:var(--surface-soft);
  transition:.3s ease;
}
.why-icon svg{width:23px}
.why-panel:hover .why-icon,.why-panel.active .why-icon{
  color:#fff;border-color:transparent;background:linear-gradient(145deg,var(--primary),var(--accent));
  box-shadow:0 15px 30px rgba(124,58,237,.22);
}
.why-content{position:relative;z-index:2}
.why-content small{
  color:var(--primary);font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.why-content h3{
  margin:5px 0 0;font:800 clamp(24px,3vw,38px)/1.1 var(--font-heading);letter-spacing:-.04em;
}
.why-content p{
  max-width:680px;
  max-height:0;
  margin:0;
  overflow:hidden;
  opacity:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
  transition:max-height .4s ease,opacity .4s ease,margin .4s ease;
}
.why-panel.active .why-content p{
  max-height:90px;
  margin-top:13px;
  opacity:1;
}
.why-metric{
  position:relative;z-index:2;
}
.why-metric strong,.why-metric span{display:block}
.why-metric strong{font:800 23px var(--font-heading);letter-spacing:-.04em}
.why-metric span{margin-top:3px;color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.why-arrow{
  position:relative;z-index:2;width:20px;color:var(--muted);transition:.3s ease;
}
.why-panel:hover .why-arrow,.why-panel.active .why-arrow{color:var(--primary);transform:rotate(45deg)}

.phase-next-section{
  padding:30px 0;
  background:var(--bg);
}
.phase-next-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px 30px;
  border:1px dashed var(--line);
  border-radius:18px;
}
.phase-next-inner span{
  color:var(--primary);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.phase-next-inner p{margin:0;color:var(--muted);font-size:12px}

@media(max-width:1180px){
  .case-study,.case-study.reverse{grid-template-columns:1fr;gap:40px}
  .case-study.reverse .case-copy,.case-study.reverse .case-visual{order:initial}
  .case-copy>p{max-width:700px}
  .case-visual{min-height:570px}
  .technology-layout{grid-template-columns:1fr}
  .technology-detail{min-height:auto}
}
@media(max-width:900px){
  .case-studies-section,.technology-section,.why-section{padding-block:105px}
  .case-studies-list{gap:75px}
  .case-study{padding:50px 35px;border-radius:30px}
  .technology-network{transform:scale(.85);margin-inline:-8%;min-height:610px}
  .why-panel{
    grid-template-columns:44px 62px 1fr 30px;
  }
  .why-metric{display:none}
}
@media(max-width:700px){
  .case-studies-section,.technology-section,.why-section{padding-block:82px}
  .case-studies-intro,.technology-intro,.why-intro{margin-bottom:58px}
  .case-study{
    min-height:auto;
    padding:35px 22px;
    border-radius:24px;
  }
  .case-copy h3{font-size:43px}
  .case-results{gap:5px}
  .case-results>div{padding-inline:5px}
  .case-results strong{font-size:22px}
  .case-visual{min-height:385px}
  .laptop-screen{height:285px;border-width:5px}
  .device-laptop{width:105%}
  .device-phone{width:103px;height:212px;right:-3%}
  .mobile-shop{padding:22px 8px 8px}
  .mobile-product-ring{width:60px;height:60px;margin:18px auto 12px;border-width:6px}
  .mobile-shop h5{font-size:10px}
  .site-header,.spatial-nav,.triq-nav,.school-nav,.energy-nav,.markone-nav{height:35px;padding-inline:12px}
  .site-header nav,.spatial-nav span,.triq-nav span,.school-nav span,.energy-nav span,.markone-nav span{display:none}
  .soundhealth-hero,.school-hero,.markone-hero{min-height:195px;padding:28px 20px}
  .soundhealth-hero h4,.spatial-hero h4,.triq-hero h4,.school-hero h4,.energy-hero h4,.markone-hero h4{font-size:23px}
  .sound-wave{right:15px;bottom:30px;height:55px}
  .sound-wave i:nth-child(3),.sound-wave i:nth-child(5){height:45px}
  .sound-wave i:nth-child(4){height:55px}
  .spatial-hero,.triq-hero,.energy-hero{min-height:210px;padding:20px}
  .spatial-orbit{width:120px;height:120px}
  .spatial-orbit span{width:40px;height:40px}
  .triq-products{width:120px;height:160px}
  .triq-products i{width:38px;height:110px}
  .triq-products i:nth-child(2){left:42px;height:130px}
  .triq-products i:nth-child(3){right:2px}
  .triq-products span{left:48px;bottom:64px;font-size:6px}
  .energy-turbines{height:140px}
  .energy-turbines i:nth-child(2){left:60px;height:100px}
  .energy-turbines i:nth-child(1){left:10px;height:70px}
  .energy-turbines i:nth-child(3){right:5px;height:80px}
  .case-float-card,.portal-card{display:none}
  .technology-network{
    min-height:560px;
    transform:scale(.68);
    margin:-80px -25% -70px;
  }
  .technology-detail{padding:30px}
  .why-panel{
    grid-template-columns:42px 1fr 25px;
    gap:14px;
    padding:25px 0;
  }
  .why-index{display:none}
  .why-icon{width:42px;height:42px;border-radius:13px}
  .why-icon svg{width:18px}
  .why-content h3{font-size:23px}
  .why-panel.active{padding-block:32px}
  .why-arrow{grid-column:3}
  .phase-next-inner{display:block}
  .phase-next-inner p{margin-top:8px}
}
@media(max-width:430px){
  .case-services span:nth-child(n+4){display:none}
  .case-results span{font-size:6px}
  .technology-network{transform:scale(.58);margin-inline:-38%}
}