:root {
    --bg:       #001933;
    --bg-2:     #002040;
    --bg-3:     #00264d;
    --bg-4:     #002b57;
    --bg-5:     #003366;
    --blue:     #2B7FFF;
    --blue-2:   #2B7FFF;
    --blue-glow:rgba(43,127,255,0.15);
    --blue-pale:rgba(43,127,255,0.08);
    --blue-border:rgba(43,127,255,0.25);
    --white:    #ffffff;
    --white-2:  #C8CEDF;
    --muted:    #6B7499;
    --muted-2:  #8B94B8;
    --rule:     rgba(255,255,255,0.07);
    --rule-2:   rgba(255,255,255,0.12);
    --green:    #00C9A7;
    --green-pale:rgba(0,201,167,0.1);
    --radius:   6px;
    --max:      1200px;
    --text-max: 700px;
    --transition:0.4s cubic-bezier(0.16,1,0.3,1);
    --fs-display:clamp(2.6rem,5.5vw,4.5rem);
    --fs-xl:clamp(1.8rem,3vw,2.6rem);
    --fs-lg:clamp(1.1rem,1.8vw,1.4rem);
    --fs-base:1rem;
    --fs-sm:0.875rem;
    --fs-xs:0.75rem;
  }

  body{background:var(--bg) !important;color:var(--white) !important;line-height:1.6;overflow-x:hidden}
  h1,h2,h3,h4{ font-weight:400;line-height:1.15}
  /* PROGRESS */
  .progress-bar{position:fixed;top:0;left:0;z-index:200;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-2));transition:width .1s linear}

  /* HERO */
  .case-hero{
    padding:4rem 3rem 3rem;
    border-bottom:1px solid var(--rule);
    position:relative;overflow:hidden;
  }
  .case-hero-bg{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 60% at 60% 40%,rgba(43,127,255,0.07) 0%,transparent 70%);
    pointer-events:none;
  }
  .case-hero-grid{
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(43,127,255,0.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(43,127,255,0.04) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,black,transparent);
  }
  .case-hero-inner{
    max-width:var(--max);margin:0 auto;
    display:grid;grid-template-columns:55fr 45fr;gap:2.5rem;align-items:center;
    position:relative;z-index:1;
  }
  .case-breadcrumb{
    display:flex;align-items:center;gap:.5rem;
    font-size:var(--fs-xs);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:1rem;
  }
  .case-breadcrumb span{color:var(--blue-2)}
  .case-breadcrumb svg{width:10px;opacity:.4}
  .case-hero h1{font-size:var(--fs-display);color:var(--white);margin-bottom:1.25rem}
  .case-hero h1 em{color:var(--blue-2);font-style:italic}
  .case-hero-desc{font-size:16px;color:var(--muted-2);max-width:560px;line-height:1.7;font-weight:300;margin-bottom:2rem}
  .case-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
  .tag{padding:.3rem .8rem;border:1px solid var(--rule-2);font-size:var(--fs-xs);color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase;border-radius:100px}
  .tag.blue{border-color:var(--blue-border);color:var(--blue-2)}
  .aside-block{border:1px solid var(--rule);padding:1.5rem;margin-bottom:1px;background:var(--bg-2);border-radius:2px}
  .aside-label{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
  .aside-value{ font-size:1.1rem;color:var(--white)}
  .aside-value.blue{color:var(--blue-2)}

  /* SECTIONS */
  .cs-section{padding:5rem 3rem;border-bottom:1px solid var(--rule)}
  .cs-section-inner{max-width:var(--max);margin:0 auto}
  .cs-section-inner.with-aside{display:grid;grid-template-columns:240px 1fr;gap:5rem;align-items:start}
  .section-number{
     font-size:.75rem;color:var(--muted);
    letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.5rem;
    display:flex;align-items:center;gap:.75rem;
  }
  .section-number::after{content:'';flex:1;height:1px;background:var(--rule)}
  .cs-h2{font-size:var(--fs-xl);color:var(--white);margin-bottom:1.25rem}
  .cs-body{font-size:var(--fs-base);color:var(--muted-2);line-height:1.8;font-weight:300;max-width:var(--text-max)}
  .cs-body strong{color:var(--white);font-weight:500}
  .pull-quote{
    border-left:2px solid var(--blue);
    padding:1.5rem 2rem;margin:2.5rem 0;
    background:var(--blue-pale);
    max-width:var(--text-max);border-radius:0 var(--radius) var(--radius) 0;
  }
  .pull-quote p{ font-size:1.25rem;color:var(--white);line-height:1.5;font-style:italic}

  /* ASIDE NAV */
  .section-aside{position:sticky;top:5rem}
  .aside-nav-item{
    display:block;padding:.75rem 0;
    border-bottom:1px solid var(--rule);
    font-size:var(--fs-xs);color:var(--muted);
    letter-spacing:.06em;text-transform:uppercase;transition:color .2s;
  }
  .aside-nav-item:hover,.aside-nav-item.active{color:var(--blue-2)}
  .aside-nav-item.active{border-bottom-color:var(--blue)}

  /* CHALLENGE CARDS */
  .challenge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem;border-radius:var(--radius);overflow:hidden}
  .challenge-card{background:var(--bg-2);padding:2rem;transition:background var(--transition)}
  .challenge-card:hover{background:var(--bg-3)}
  .challenge-icon{font-size:1.5rem;margin-bottom:1.25rem}
  .challenge-title{ font-size:1.1rem;color:var(--white);margin-bottom:.75rem}
  .challenge-desc{font-size:var(--fs-sm);color:var(--muted-2);line-height:1.6;font-weight:300}

  /* ARCHITECTURE */
  .arch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:1px solid var(--rule);border-bottom:none;border-right:none;margin-top:2.5rem;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
  .arch-item{padding:1.75rem 1.5rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background var(--transition)}
  .arch-item:hover{background:var(--bg-2)}
  .arch-num{ font-size:2rem;color:var(--bg-5);margin-bottom:.75rem;transition:color var(--transition)}
  .arch-item:hover .arch-num{color:var(--blue-2)}
  .arch-name{font-weight:600;font-size:var(--fs-sm);color:var(--white);margin-bottom:.35rem}
  .arch-tech{font-size:var(--fs-xs);color:var(--muted)}

  /* ROADMAP */
  .roadmap{margin-top:2.5rem;border-left:1px solid var(--rule);padding-left:2.5rem}
  .roadmap-item{position:relative;padding-bottom:2.5rem}
  .roadmap-item:last-child{padding-bottom:0}
  .roadmap-dot{position:absolute;left:-2.75rem;top:.4rem;width:8px;height:8px;border-radius:50%;background:var(--bg-4);border:1px solid var(--rule-2);transition:background var(--transition)}
  .roadmap-item:hover .roadmap-dot{background:var(--blue)}
  .roadmap-phase{font-size:var(--fs-xs);color:var(--blue-2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
  .roadmap-title{ font-size:1.15rem;color:var(--white);margin-bottom:.5rem}
  .roadmap-desc{font-size:var(--fs-sm);color:var(--muted-2);font-weight:300;line-height:1.6;max-width:500px}

  /* RESULTS DASHBOARD */
  .results-board{background:var(--bg-2);border:1px solid var(--rule);margin-top:2.5rem;overflow:hidden;border-radius:var(--radius)}
  .results-header{padding:1.5rem 2rem;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between}
  .results-header h3{ font-size:1rem;color:var(--white)}
  .results-badge{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.25rem .75rem;
    background:var(--green-pale);border:1px solid rgba(0,201,167,.3);
    font-size:var(--fs-xs);color:var(--green);letter-spacing:.06em;text-transform:uppercase;
    border-radius:100px;
  }
  .results-badge::before{content:'●';font-size:.5rem}
  .results-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--rule);border-bottom:1px solid var(--rule)}
  .result-cell{background:var(--bg-2);padding:2rem 1.5rem;border-right:1px solid var(--rule)}
  .result-cell:last-child{border-right:none}
  .result-before{font-size:var(--fs-xs);color:var(--muted);margin-bottom:.25rem}
  .result-before-val{font-size:.95rem;color:var(--muted);text-decoration:line-through}
  .result-after{ font-size:2rem;color:var(--blue-2);line-height:1;margin-bottom:.3rem}
  .result-label{font-size:var(--fs-xs);color:var(--muted-2)}
  .results-note{padding:1.25rem 2rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

  /* BAR CHART */
  .bar-row{display:flex;align-items:center;gap:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--rule)}
  .bar-label{font-size:var(--fs-xs);color:var(--muted-2);width:160px;flex-shrink:0}
  .bar-track{flex:1;height:4px;background:var(--bg-4);position:relative;overflow:hidden;border-radius:2px}
  .bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2));border-radius:2px;transform-origin:left;animation:barGrow 1.2s cubic-bezier(.16,1,.3,1) both}
  @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .bar-val{ font-size:.95rem;color:var(--blue-2);width:80px;text-align:right}

  /* TESTIMONIAL */
  .testimonial-hero{background:var(--bg-2);border:1px solid var(--rule);padding:3rem;margin-top:2.5rem;position:relative;border-radius:var(--radius)}
  .testimonial-hero::before{content:'"'; font-size:8rem;color:var(--blue-pale);line-height:1;position:absolute;top:1rem;right:2rem;pointer-events:none}
  .testimonial-hero blockquote{ font-size:clamp(1.2rem,2.5vw,1.6rem);color:var(--white);line-height:1.6;font-style:italic;margin-bottom:2rem;max-width:620px}
  .testimonial-hero cite{display:flex;align-items:center;gap:1rem;font-style:normal}
  .cite-avatar{width:44px;height:44px;border-radius:50%;background:var(--blue-pale);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center; font-size:.9rem;color:var(--blue-2)}
  .cite-name{font-weight:600;font-size:var(--fs-sm);color:var(--white)}
  .cite-role{font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}

  /* FUTURE */
  .opp-item{display:flex;align-items:flex-start;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--rule)}
  .opp-num{ font-size:1.5rem;color:var(--blue-2);line-height:1;flex-shrink:0;width:2rem}
  .opp-title{font-weight:600;font-size:var(--fs-base);color:var(--white);margin-bottom:.35rem}
  .opp-desc{font-size:var(--fs-sm);color:var(--muted-2);font-weight:300;line-height:1.6}

  /* TECH STACK */
  .stack-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
  .chip{padding:.4rem .9rem;border:1px solid var(--rule-2);font-size:var(--fs-xs);color:var(--muted-2);letter-spacing:.04em;border-radius:100px;transition:var(--transition)}
  .chip:hover{border-color:var(--blue);color:var(--blue-2);background:var(--blue-pale)}

  /* CTA STRIP */
  .cta-strip{
    background:var(--bg-2);
    border-top:1px solid var(--rule);
    padding:4rem 3rem;text-align:center;
    position:relative;overflow:hidden;
  }
  .cta-strip-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:200px;background:radial-gradient(ellipse,rgba(43,127,255,.1) 0%,transparent 70%);pointer-events:none}
  .cta-strip h2{font-size:var(--fs-xl);color:var(--white);margin-bottom:1rem;position:relative}
  .cta-strip p{font-size:var(--fs-base);color:var(--muted-2);max-width:440px;margin:0 auto 2.5rem;font-weight:300}
  .btn-primary{display:inline-block;        border-radius: 8.145px;
        background: linear-gradient(90deg, #0369cd 0%, #0092b8 100%);
        box-shadow: 0 25.452px 50.904px -12.217px rgba(0, 184, 219, 0.3);
        padding: 8px 22px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 33.506px;
        transition: 0.3s;}
  .btn-primary:hover{background:var(--blue-2)}
  .btn-ghost{display:inline-block;padding: 8px 22px; line-height: 32px; border: 1.287px solid #d7d7d7 !important;color: #fff;font-size:var(--fs-sm);letter-spacing:.04em; border-radius: 8.145px;transition:var(--transition);margin:0 .5rem}
  .btn-ghost:hover{border-color:var(--white);color:var(--white)}



  /* RESPONSIVE */
  @media(max-width:1024px){
    .case-hero-inner{grid-template-columns:1fr;gap:2.5rem}
    .cs-section-inner.with-aside{grid-template-columns:1fr;gap:2.5rem}
    .section-aside{position:static}
    .results-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:768px){
    .case-hero{padding:7rem 1.5rem 4rem}
    .cs-section{padding:3rem 1.5rem}
    .results-grid{grid-template-columns:repeat(2,1fr)}
    footer{padding:2rem 1.5rem;flex-direction:column}
    .bar-label{width:110px;font-size:.7rem}
  }

  @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  .case-hero-inner>*{animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both}
  .case-hero-inner>*:nth-child(1){animation-delay:.1s}
  .case-hero-inner>*:nth-child(2){animation-delay:.3s}

  /* HERO MOCKUP — transparent floating product showcase */
  .hero-mockup-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
  }
  .hero-mockup-glow {
    position: absolute;
    inset: 8% -4%;
    background:
      radial-gradient(ellipse 75% 60% at 50% 48%, rgba(79,126,255,0.26) 0%, transparent 68%),
      radial-gradient(ellipse 40% 35% at 68% 62%, rgba(43,127,255,0.18) 0%, transparent 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
  }
  .hero-mockup-img {
    position: relative;
    z-index: 1;
    width: 120%;
    max-width: none;
    height: auto;
    display: block;
    margin: -1.5rem -8% -1rem -16%;
    transform: rotateY(-7deg) rotateZ(-4deg) translateY(-6px);
    transform-style: preserve-3d;
    filter:
      drop-shadow(0 40px 70px rgba(0,0,0,0.55))
      drop-shadow(0 14px 28px rgba(43,127,255,0.20));
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
  }
  .hero-mockup-img:hover {
    transform: rotateY(-4deg) rotateZ(-3deg) translateY(-14px);
    filter:
      drop-shadow(0 52px 90px rgba(0,0,0,0.6))
      drop-shadow(0 18px 40px rgba(43,127,255,0.28));
  }
  .hero-mockup-wrap::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 14%;
    bottom: 2%;
    height: 36px;
    background: radial-gradient(ellipse 55% 100% at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 72%);
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
  }
  @media(max-width:1024px){
    .hero-mockup-img { transform: none; width: 100%; margin: 0; }
    .hero-mockup-wrap { padding: 1rem 0; }
    .hero-mockup-wrap::after { display: none; }
  }

  /* SECTION NAV BAR */
  .section-nav {
    position: sticky;
    top: 58px;
    z-index: 90;
    background: rgba(0,25,51,0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    padding: 0 3rem;
    gap: 0;
  }
  .snav-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: .75rem 1.1rem;
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .2s;
    cursor: pointer;
    text-decoration: none;
  }
  .snav-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--blue-2);
    transform: scaleX(0);
    transition: transform .25s cubic-bezier(0.16,1,0.3,1);
  }
  .snav-item:hover { color: var(--white-2); }
  .snav-item.active { color: var(--blue-2); }
  .snav-item.active::after { transform: scaleX(1); }

  /* EXEC SUMMARY HERO */
  .exec-summary-hero {
    display: grid;
    grid-template-columns: 62fr 38fr;
    gap: 2rem;
    align-items: center;
    padding: 5rem 2rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
  }
  .exec-summary-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(43,127,255,0.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(43,127,255,0.04) 1px,transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 40% 50%, black, transparent);
    pointer-events: none;
  }
  .exec-summary-left {
    position: relative;
    z-index: 1;
    max-width: 650px;
  }
  .exec-summary-left .cs-body {
    max-width: 100%;
    line-height: 1.85;
  }
  .exec-summary-left .cs-body + .cs-body {
    margin-top: 1.25rem;
  }

  /* PREMIUM PULL QUOTE */
  .pull-quote-premium {
    position: relative;
    background: rgba(15,20,34,0.8);
    border: 1px solid rgba(43,127,255,0.25);
    border-left: 3px solid var(--blue-2);
    padding: 2rem 2.25rem 2rem 3.5rem;
    margin: 2.5rem 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 32px rgba(43,127,255,0.08), inset 0 0 60px rgba(43,127,255,0.03);
  }
  .pull-quote-premium::before {
    content: '"';
      
    font-size: 5rem;
    line-height: 1;
    color: rgba(74,132,255,0.18);
    position: absolute;
    top: .5rem;
    left: .75rem;
    pointer-events: none;
  }
  .pull-quote-premium p {
      
    font-size: 1.15rem;
    color: var(--white);
    line-height: 1.6;
    font-style: italic;
    position: relative;
    z-index: 1;
  }

  /* QUEEN ILLUSTRATION */
  .queen-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .queen-glow {
    position: absolute;
    inset: 0% 2%;
    background:
      radial-gradient(ellipse 70% 75% at 48% 50%, rgba(79,126,255,0.22) 0%, transparent 66%),
      radial-gradient(ellipse 35% 30% at 30% 28%, rgba(255,220,120,0.10) 0%, transparent 70%);
    filter: blur(34px);
    pointer-events: none;
    border-radius: 50%;
  }
  .queen-img {
    position: relative;
    z-index: 1;
    width: 112%;
    max-width: 620px;
    height: auto;
    display: block;
    margin: -1rem -4% -1.5rem 0;
    filter:
      drop-shadow(0 28px 60px rgba(0,0,0,0.55))
      drop-shadow(0 8px 26px rgba(43,127,255,0.16));
    animation: queenFloat 5s ease-in-out infinite;
  }
  @keyframes queenFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(0.6deg); }
  }
  @media(max-width:1024px){
    .exec-summary-hero { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
    .queen-img { max-width: 340px; width: 100%; margin: 0; }
  }
  @media(max-width:768px){
    .section-nav-inner { padding: 0 1rem; }
    .exec-summary-hero { padding: 2.5rem 1.5rem; }
  }