/* Ice Light palette — 2026-09-09
   Keeps the approved ControlPDV layout and Sasuke Steel accents while replacing
   the dark institutional canvas with a cold ice-blue / off-white surface. */

:root{
  color-scheme:light;
  --ice-bg:#EDF3F8;
  --ice-bg-deep:#E3ECF4;
  --ice-surface:rgba(255,255,255,.66);
  --ice-surface-strong:rgba(248,251,254,.88);
  --ice-line:rgba(19,56,108,.13);
  --ice-line-strong:rgba(40,90,150,.24);
  --ice-text:#10243B;
  --ice-muted:rgba(16,36,59,.70);
  --ice-muted-2:rgba(16,36,59,.54);

  --bg:var(--ice-bg);
  --bg-deep:var(--ice-bg-deep);
  --surface:var(--ice-surface);
  --surface-strong:var(--ice-surface-strong);
  --surface-soft:rgba(255,255,255,.48);
  --line:var(--ice-line);
  --line-strong:var(--ice-line-strong);
  --text:var(--ice-text);
  --muted:var(--ice-muted);
  --muted-2:var(--ice-muted-2);
  --cyan:#285A96;
  --cyan-2:#3C6FAE;
  --blue:#13386C;
  --shadow:0 24px 70px rgba(19,56,108,.12);
}

html{background:var(--ice-bg-deep)!important}
body{
  background:
    radial-gradient(circle at 14% 7%,rgba(60,111,174,.18),transparent 32rem),
    radial-gradient(circle at 88% 28%,rgba(19,56,108,.09),transparent 34rem),
    radial-gradient(circle at 52% 88%,rgba(255,255,255,.82),transparent 30rem),
    linear-gradient(180deg,#F7FAFD 0%,var(--ice-bg) 42%,var(--ice-bg-deep) 100%)!important;
  color:var(--ice-text)!important;
}
body::before{
  background-image:
    linear-gradient(rgba(19,56,108,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,56,108,.035) 1px,transparent 1px)!important;
}
.noise{opacity:.018!important}
.ambient-one{background:#6F96C7!important;opacity:.12!important}
.ambient-two{background:#AFC0D4!important;opacity:.14!important}

/* Typography */
h1,h2,h3,h4,strong,.brand-name,.footer-col strong{color:var(--ice-text)!important}
.hero-lead,
.page-hero-lead,
.web-section-head p,
.page-section-head p,
.product-proof-card p,
.contact-direct-panel p,
.narrative-copy,
.section-head>p,
.offline-copy>p,
.shortcut-card p,
.web-card p,
.story-card p,
.product-lane p,
.directory-card p,
.contact-card p,
.resource-card p,
.faq-item p,
.plan-card>p,
.plan-feature-list,
.footer-intro p,
.footer-bottom,
.sale-items span,
.sale-total span,
.sync-row,
.proof-total span,
.proof-metrics small{
  color:var(--ice-muted)!important;
}
.mega-link small,.console-label,.console-node small,.map-label,.map-label small,.plan-top small,.price span,.price sup{
  color:var(--ice-muted-2)!important;
}
.eyebrow,.page-kicker,.section-label,.lane-tag,.story-card .number,
.directory-card small,.resource-card small,.web-card small,.shortcut-card small,
.contact-card small,.web-card .mini-link,.directory-card a,.contact-card a{
  color:#285A96!important;
}
.gradient-text,.page-hero h1 span{
  color:transparent!important;
  background:linear-gradient(90deg,#13386C 0%,#285A96 48%,#5F82AD 100%)!important;
  background-clip:text!important;
  -webkit-background-clip:text!important;
}

/* Header / navigation */
.site-header{
  border-color:rgba(19,56,108,.14)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(241,247,252,.82))!important;
  box-shadow:0 16px 46px rgba(19,56,108,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(20px) saturate(135%)!important;
}
.site-header.scrolled{background:rgba(246,250,253,.95)!important}
.desktop-nav.tech-nav.mega-nav{
  border-color:rgba(19,56,108,.10)!important;
  background:rgba(19,56,108,.035)!important;
}
.mega-nav .nav-trigger,.mega-nav>a.nav-direct,.header-actions .utility-link,.header-actions .text-link{
  color:rgba(16,36,59,.72)!important;
}
.mega-nav .nav-trigger:hover,.mega-nav>a.nav-direct:hover,
.mega-nav .nav-item.active>.nav-trigger,.mega-nav>a.nav-direct.active{
  color:#13386C!important;
  background:rgba(40,90,150,.10)!important;
}
.mega-panel{
  border-color:rgba(19,56,108,.15)!important;
  background:linear-gradient(155deg,rgba(252,254,255,.98),rgba(235,243,249,.99))!important;
  box-shadow:0 28px 72px rgba(19,56,108,.18),inset 0 1px 0 #fff!important;
}
.mega-title strong,.mega-link strong{color:var(--ice-text)!important}
.mega-link{
  border-color:rgba(19,56,108,.10)!important;
  background:rgba(255,255,255,.58)!important;
}
.mega-link:hover{
  border-color:rgba(40,90,150,.24)!important;
  background:rgba(40,90,150,.08)!important;
}

/* Glass cards */
.shortcut-card,.web-card,.segment-card,.value-card,.resource-card,.directory-card,
.story-card,.product-lane,.contact-card,.plan-card,.faq-item,.company-panel,
.contact-direct-panel,.pain-card,.feature,.eco-card,.timeline-item,.home-cta{
  border-color:rgba(19,56,108,.12)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(236,244,250,.52))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.shortcut-card:hover,.segment-card:hover,.resource-card:hover,.directory-card:hover,
.story-card:hover,.product-lane:hover,.pain-card:hover{
  border-color:rgba(40,90,150,.26)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(222,235,246,.68))!important;
}
.web-card.large,.featured-plan,.food-plan{
  background:
    radial-gradient(circle at 84% 16%,rgba(60,111,174,.12),transparent 38%),
    linear-gradient(155deg,rgba(255,255,255,.80),rgba(227,238,247,.58))!important;
}
.page-section+.page-section,.site-footer,.page-footer,.footer-bottom{
  border-color:rgba(19,56,108,.09)!important;
}

/* Institutional diagrams become light glass too */
.hero-console,.tech-panel{
  border-color:rgba(19,56,108,.15)!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(60,111,174,.08),transparent 55%),
    linear-gradient(155deg,rgba(255,255,255,.76),rgba(231,240,247,.72))!important;
  box-shadow:0 24px 70px rgba(19,56,108,.12),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.hero-console::before,.tech-panel::before,.mega-panel::before{
  background:
    linear-gradient(rgba(19,56,108,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,56,108,.035) 1px,transparent 1px)!important;
}
.hero-console .console-core{
  border-color:rgba(40,90,150,.28)!important;
  background:linear-gradient(145deg,rgba(60,111,174,.14),rgba(255,255,255,.68))!important;
  box-shadow:0 0 42px rgba(40,90,150,.12),inset 0 0 32px rgba(255,255,255,.42)!important;
}
.hero-console .console-node{
  border-color:rgba(19,56,108,.12)!important;
  background:rgba(248,251,254,.94)!important;
  box-shadow:0 12px 28px rgba(19,56,108,.12)!important;
}
.timeline-dot{background:#E8F0F7!important}

/* Keep product proof / POS mock dark for visual hierarchy and product realism */
.glass-card.terminal-card,.proof-window{
  color:#F5FBFD!important;
  background:linear-gradient(145deg,rgba(16,25,38,.96),rgba(8,13,20,.92))!important;
}
.glass-card.terminal-card strong,.proof-window strong,.proof-window b{color:#F5FBFD!important}
.glass-card.terminal-card .sale-items span,.glass-card.terminal-card .sale-total span,
.glass-card.terminal-card .sync-row,.proof-window .proof-total span,.proof-window .proof-metrics small{
  color:rgba(217,222,228,.68)!important;
}
.product-proof-card{
  border-color:rgba(19,56,108,.12)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(233,242,249,.58))!important;
}

/* Forms and mobile navigation */
.contact-form{
  border-color:rgba(19,56,108,.13)!important;
  background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(230,240,248,.58))!important;
}
.field label{color:rgba(16,36,59,.75)!important}
.field input,.field select,.field textarea{
  border-color:rgba(19,56,108,.14)!important;
  background:rgba(255,255,255,.76)!important;
  color:var(--ice-text)!important;
}
.mobile-nav-overlay{background:rgba(19,36,55,.22)!important}
.mobile-nav-panel{
  border-color:rgba(19,56,108,.14)!important;
  background:linear-gradient(160deg,rgba(252,254,255,.98),rgba(232,241,248,.99))!important;
  box-shadow:0 28px 70px rgba(19,56,108,.20)!important;
}
.mobile-nav-panel a{
  border-color:rgba(19,56,108,.10)!important;
  background:rgba(255,255,255,.56)!important;
  color:var(--ice-text)!important;
}
.mobile-nav-panel a.active{background:rgba(40,90,150,.10)!important;color:#13386C!important}
.nav-toggle{color:#13386C!important;background:rgba(40,90,150,.08)!important}

/* Watermark should remain subtle on a light canvas */
.global-watermark{opacity:.40!important}
.global-watermark::before{
  border-color:rgba(19,56,108,.065)!important;
  box-shadow:0 0 0 120px rgba(60,111,174,.018),0 0 0 240px rgba(255,255,255,.18),inset 0 0 90px rgba(40,90,150,.025)!important;
}
.global-watermark::after{
  border-color:rgba(19,56,108,.05)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(19,56,108,.10) 0 3px,transparent 4px),
    radial-gradient(circle at 100% 50%,rgba(60,111,174,.12) 0 4px,transparent 5px),
    radial-gradient(circle at 22% 88%,rgba(40,90,150,.10) 0 4px,transparent 5px),
    radial-gradient(circle at 50% 50%,rgba(60,111,174,.05),transparent 58%)!important;
}

@media(max-width:760px){
  .global-watermark{opacity:.26!important}
}

/* deploy-retry: 2026-09-09T20:18-03:00 */


/* Dark-blue animated ControlPDV watermark — v2 */
.global-watermark{
  opacity:1!important;
  background:transparent!important;
}
.global-watermark::before{
  width:min(1580px,112vw)!important;
  aspect-ratio:1;
  left:50%!important;
  top:52%!important;
  border:1px solid rgba(19,56,108,.16)!important;
  box-shadow:
    0 0 0 130px rgba(19,56,108,.035),
    0 0 0 260px rgba(40,90,150,.022),
    inset 0 0 120px rgba(19,56,108,.055)!important;
  opacity:.82!important;
  animation:globalHaloRotate 46s linear infinite!important;
}
.global-watermark::after{
  width:min(980px,72vw)!important;
  height:min(520px,38vw)!important;
  left:50%!important;
  top:53%!important;
  border:0!important;
  border-radius:0!important;
  background:#13386C!important;
  opacity:.13!important;
  -webkit-mask:url("./controlpdv-logo.svg") center/contain no-repeat;
  mask:url("./controlpdv-logo.svg") center/contain no-repeat;
  transform:translate(-50%,-50%) scale(1)!important;
  animation:controlPdvWatermarkFloat 18s ease-in-out infinite alternate!important;
}
@keyframes controlPdvWatermarkFloat{
  0%{transform:translate(-52%,-49%) scale(.97) rotate(-1.2deg)}
  50%{transform:translate(-48%,-52%) scale(1.03) rotate(.8deg)}
  100%{transform:translate(-51%,-50%) scale(1) rotate(-.4deg)}
}
@media(max-width:760px){
  .global-watermark::before{
    width:145vw!important;
    opacity:.64!important;
  }
  .global-watermark::after{
    width:112vw!important;
    height:62vw!important;
    opacity:.10!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .global-watermark::before,
  .global-watermark::after{
    animation:none!important;
  }
}


/* Light-theme contrast reinforcement — 2026-09-09
   Restores legibility for secondary actions and small labels on the ice canvas. */
:root{
  --ice-strong:#13386C;
  --ice-strong-2:#285A96;
  --ice-muted:rgba(16,36,59,.80);
  --ice-muted-2:rgba(16,36,59,.66);
  --ice-soft-fill:#E2ECF6;
  --ice-soft-fill-2:#D7E5F2;
  --ice-soft-line:rgba(19,56,108,.22);
}

/* Secondary / ghost actions must read as active, not disabled. */
.button.button-ghost,
a.button.button-ghost,
button.button-ghost{
  color:var(--ice-strong)!important;
  background:linear-gradient(180deg,var(--ice-soft-fill),var(--ice-soft-fill-2))!important;
  border:1px solid var(--ice-soft-line)!important;
  opacity:1!important;
  font-weight:800!important;
  text-shadow:none!important;
  box-shadow:
    0 10px 24px rgba(19,56,108,.08),
    inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.button.button-ghost:hover,
a.button.button-ghost:hover,
button.button-ghost:hover{
  color:#0D2A54!important;
  background:linear-gradient(180deg,#D9E7F4,#CEDFED)!important;
  border-color:rgba(19,56,108,.34)!important;
  box-shadow:
    0 13px 28px rgba(19,56,108,.13),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

/* Official channel links, including Instagram, get a stronger visual signal. */
a[href*="instagram.com"]:not(.mega-link){
  color:var(--ice-strong)!important;
}
a.button[href*="instagram.com"]{
  color:var(--ice-strong)!important;
  background:linear-gradient(180deg,#DFEAF5,#D3E2F0)!important;
  border-color:rgba(19,56,108,.25)!important;
  opacity:1!important;
}

/* Small copy and labels that became washed out after the light-theme conversion. */
.console-label,
.console-label b,
.console-node small,
.page-kicker,
.section-label,
.footer-bottom,
.directory-card small,
.resource-card small,
.web-card small,
.shortcut-card small,
.contact-card small,
.plan-top small,
.price span,
.price sup,
.map-label,
.map-label small,
.proof-top small,
.proof-toolbar b{
  color:var(--ice-muted-2)!important;
}
.console-label b,
.page-kicker,
.section-label,
.directory-card small,
.resource-card small,
.web-card small,
.shortcut-card small,
.contact-card small{
  color:var(--ice-strong-2)!important;
}

/* Secondary textual links and mobile navigation controls. */
.directory-card a,
.contact-card a,
.web-card .mini-link,
.header-actions .utility-link,
.header-actions .text-link,
.footer-col a{
  color:var(--ice-strong)!important;
  opacity:1!important;
}
.nav-toggle{
  border-color:rgba(19,56,108,.20)!important;
  background:rgba(40,90,150,.09)!important;
  color:var(--ice-strong)!important;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after{
  background:var(--ice-strong-2)!important;
  box-shadow:none!important;
}

/* Keep darker labels inside diagrams clearly readable on mobile too. */
.hero-console .console-node strong,
.hero-console .console-core strong{
  color:var(--ice-text)!important;
}


/* Watermark motion boost — 2026-09-09
   More visible motion while keeping the logo subtle and behind content. */
.global-watermark::before{
  animation:controlPdvHaloDrift 24s ease-in-out infinite alternate!important;
}
.global-watermark::after{
  animation:controlPdvWatermarkMotion 12s ease-in-out infinite!important;
  transform-origin:center center!important;
}
@keyframes controlPdvWatermarkMotion{
  0%{
    transform:translate(-56%,-47%) scale(.94) rotate(-3deg);
    opacity:.105;
  }
  20%{
    transform:translate(-48%,-55%) scale(1.04) rotate(1.8deg);
    opacity:.145;
  }
  42%{
    transform:translate(-44%,-48%) scale(1.08) rotate(3deg);
    opacity:.125;
  }
  65%{
    transform:translate(-52%,-44%) scale(1.01) rotate(-1.4deg);
    opacity:.155;
  }
  82%{
    transform:translate(-58%,-53%) scale(.97) rotate(-2.2deg);
    opacity:.12;
  }
  100%{
    transform:translate(-56%,-47%) scale(.94) rotate(-3deg);
    opacity:.105;
  }
}
@keyframes controlPdvHaloDrift{
  0%{
    transform:translate(-52%,-50%) rotate(0deg) scale(.98);
    opacity:.68;
  }
  35%{
    transform:translate(-47%,-54%) rotate(7deg) scale(1.025);
    opacity:.84;
  }
  70%{
    transform:translate(-50%,-46%) rotate(14deg) scale(1.04);
    opacity:.72;
  }
  100%{
    transform:translate(-54%,-52%) rotate(21deg) scale(1);
    opacity:.82;
  }
}
@media(max-width:760px){
  .global-watermark::after{
    animation-duration:10s!important;
  }
  .global-watermark::before{
    animation-duration:20s!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .global-watermark::before,
  .global-watermark::after{
    animation:none!important;
  }
}


/* Animated watermark center + side points — 2026-09-09 */
.watermark-core,
.watermark-dot{
  position:absolute;
  pointer-events:none;
  z-index:1;
}
.watermark-core{
  left:50%;
  top:53%;
  width:clamp(76px,7vw,118px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(19,56,108,.26);
  background:
    radial-gradient(circle at 42% 38%,rgba(255,255,255,.7),rgba(60,111,174,.16) 32%,rgba(19,56,108,.12) 58%,transparent 72%);
  box-shadow:
    0 0 34px rgba(19,56,108,.16),
    0 0 0 18px rgba(40,90,150,.025),
    inset 0 0 26px rgba(19,56,108,.10);
  opacity:.34;
  animation:watermarkCorePulse 5.8s ease-in-out infinite;
}
.watermark-dot{
  left:50%;
  top:53%;
  width:clamp(8px,.8vw,13px);
  aspect-ratio:1;
  margin:calc(clamp(8px,.8vw,13px) / -2);
  border-radius:50%;
  background:#13386C;
  box-shadow:0 0 18px rgba(19,56,108,.28);
  opacity:.34;
}
.watermark-dot.dot-a{animation:watermarkDotOrbitA 8.5s ease-in-out infinite}
.watermark-dot.dot-b{animation:watermarkDotOrbitB 10.5s ease-in-out infinite}
.watermark-dot.dot-c{animation:watermarkDotOrbitC 9.5s ease-in-out infinite}
.watermark-dot.dot-d{animation:watermarkDotOrbitD 12s ease-in-out infinite}

@keyframes watermarkCorePulse{
  0%,100%{transform:translate(-50%,-50%) scale(.88) rotate(-8deg);opacity:.24}
  35%{transform:translate(-50%,-50%) scale(1.10) rotate(5deg);opacity:.42}
  68%{transform:translate(-50%,-50%) scale(.97) rotate(12deg);opacity:.32}
}
@keyframes watermarkDotOrbitA{
  0%,100%{transform:translate(-280px,-72px) scale(.8)}
  30%{transform:translate(-210px,-150px) scale(1.15)}
  60%{transform:translate(-145px,-42px) scale(.9)}
  82%{transform:translate(-220px,78px) scale(1.05)}
}
@keyframes watermarkDotOrbitB{
  0%,100%{transform:translate(260px,-96px) scale(1)}
  25%{transform:translate(175px,-168px) scale(.82)}
  55%{transform:translate(128px,-18px) scale(1.18)}
  78%{transform:translate(238px,88px) scale(.92)}
}
@keyframes watermarkDotOrbitC{
  0%,100%{transform:translate(-238px,118px) scale(.9)}
  28%{transform:translate(-148px,52px) scale(1.12)}
  58%{transform:translate(-205px,-18px) scale(.82)}
  82%{transform:translate(-310px,34px) scale(1.05)}
}
@keyframes watermarkDotOrbitD{
  0%,100%{transform:translate(220px,126px) scale(.84)}
  24%{transform:translate(310px,42px) scale(1.08)}
  52%{transform:translate(190px,-34px) scale(.92)}
  80%{transform:translate(124px,74px) scale(1.14)}
}

@media(max-width:760px){
  .watermark-core{
    width:82px;
    opacity:.27;
  }
  .watermark-dot{
    width:9px;
    opacity:.28;
  }
  @keyframes watermarkDotOrbitA{
    0%,100%{transform:translate(-150px,-48px) scale(.8)}
    35%{transform:translate(-110px,-92px) scale(1.1)}
    70%{transform:translate(-72px,18px) scale(.9)}
  }
  @keyframes watermarkDotOrbitB{
    0%,100%{transform:translate(142px,-64px) scale(1)}
    35%{transform:translate(88px,-104px) scale(.85)}
    70%{transform:translate(70px,28px) scale(1.15)}
  }
  @keyframes watermarkDotOrbitC{
    0%,100%{transform:translate(-132px,74px) scale(.9)}
    40%{transform:translate(-72px,38px) scale(1.1)}
    75%{transform:translate(-165px,12px) scale(.86)}
  }
  @keyframes watermarkDotOrbitD{
    0%,100%{transform:translate(128px,78px) scale(.84)}
    40%{transform:translate(170px,26px) scale(1.08)}
    75%{transform:translate(68px,52px) scale(1.12)}
  }
}
@media(prefers-reduced-motion:reduce){
  .watermark-core,
  .watermark-dot{
    animation:none!important;
  }
}