/* DEEPDELL Brand System v1.0 — September 2026
   Source: DEEPDELL Brand Guidelines v1.0
*/
:root{
  --brand-deep-navy:#011434;
  --brand-night-blue:#021C3D;
  --brand-electric-cyan:#20F3FB;
  --brand-aqua:#0AC7E6;
  --brand-ice:#89F9FD;
  --brand-signal-blue:#0A7FDB;
  --brand-white:#FFFFFF;
  --brand-text:#FFFFFF;
  --brand-muted:#B7C7D8;
  --brand-line:rgba(137,249,253,.16);
  --brand-radius:8px;
}

html{background:var(--brand-deep-navy)}
body{
  background:var(--brand-deep-navy)!important;
  color:var(--brand-text)!important;
  font-family:Inter,Manrope,Sora,Arial,Helvetica,sans-serif!important;
}

/* Controlled depth: navy - blue - cyan, never rainbow */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 78% 4%,rgba(10,127,219,.14),transparent 27%),
    radial-gradient(circle at 50% 45%,rgba(10,199,230,.045),transparent 38%);
}

.noise{opacity:.018!important}

.site-header{
  height:78px!important;
  background:rgba(1,20,52,.92)!important;
  border-bottom:1px solid var(--brand-line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px);
}
.brand{gap:10px!important}
.brand img{
  width:46px!important;
  height:46px!important;
  object-fit:contain;
  filter:none!important;
}
.brand:after{
  content:'DEEPDELL';
  font-family:Inter,Manrope,Sora,Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.045em;
  color:var(--brand-white);
  line-height:1;
}
.nav a,.header-cta{color:#D8E5F0!important}
.nav a:hover,.text-link:hover{color:var(--brand-electric-cyan)!important}
.header-cta{
  border:1px solid rgba(32,243,251,.34)!important;
  border-radius:var(--brand-radius)!important;
  background:transparent!important;
}
.header-cta:hover{background:rgba(32,243,251,.08)!important;border-color:var(--brand-electric-cyan)!important}
.menu i{background:var(--brand-white)!important}

/* Typography — structured, precise, no decorative rainbow treatment */
h1,h2,h3{font-family:Inter,Manrope,Sora,Arial,sans-serif!important}
h1{font-weight:800!important;line-height:1.05!important;letter-spacing:-.055em!important}
h2{font-weight:700!important;line-height:1.1!important;letter-spacing:-.045em!important}
h3{font-weight:600!important}
h1 em,h2 span{
  background:none!important;
  -webkit-background-clip:initial!important;
  color:var(--brand-electric-cyan)!important;
}
.eyebrow,.section-kicker,.service-num,.ai-index,.trust-line,.dash-top,.dash-bottom{
  color:var(--brand-ice)!important;
}
.pulse{background:var(--brand-electric-cyan)!important;box-shadow:0 0 16px var(--brand-electric-cyan)!important}

/* Hero: one focal point + one supporting orbital system */
.hero{background:transparent!important}
.hero-lead{color:var(--brand-muted)!important}
.hero-note{color:#8298AD!important}
.btn{border-radius:var(--brand-radius)!important;transition:transform 200ms ease,background 200ms ease,border-color 200ms ease,box-shadow 200ms ease!important}
.primary{
  background:var(--brand-electric-cyan)!important;
  color:#011434!important;
  box-shadow:0 10px 35px rgba(32,243,251,.16)!important;
}
.primary:hover{background:var(--brand-ice)!important;box-shadow:0 14px 42px rgba(32,243,251,.24)!important}
.ghost{border-color:var(--brand-line)!important;color:var(--brand-white)!important;background:rgba(2,28,61,.42)!important}
.ghost:hover{border-color:rgba(32,243,251,.4)!important;background:rgba(2,28,61,.8)!important}

/* Orbital visual language: deep field, cyan focal light, restrained motion */
.orb{
  background:linear-gradient(145deg,var(--brand-night-blue),var(--brand-deep-navy))!important;
  box-shadow:0 0 90px rgba(10,127,219,.14),inset 0 0 70px rgba(10,199,230,.06)!important;
}
.orb:before{border-color:rgba(32,243,251,.35)!important}
.orb-core{background:var(--brand-white)!important;box-shadow:0 0 20px #fff,0 0 70px var(--brand-electric-cyan),0 0 120px rgba(10,127,219,.6)!important}
.ring{border-color:var(--brand-electric-cyan)!important;border-left-color:transparent!important;filter:drop-shadow(0 0 7px rgba(32,243,251,.42))!important}
.dot{background:var(--brand-ice)!important;box-shadow:0 0 15px var(--brand-electric-cyan)!important}
.floating-card{
  background:rgba(2,28,61,.88)!important;
  border-color:var(--brand-line)!important;
  border-radius:var(--brand-radius)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}
.floating-card span{color:var(--brand-electric-cyan)!important}

/* Layout: disciplined 8px rhythm, restrained surfaces */
.section-pad{max-width:1240px!important}
.service-grid,.ai-grid,.steps{border-color:var(--brand-line)!important}
.service,.ai-grid article,.why-grid article,.steps article{
  background:rgba(2,28,61,.48)!important;
  border-color:var(--brand-line)!important;
  box-shadow:none!important;
  transition:transform 200ms ease,background 200ms ease,border-color 200ms ease!important;
}
.service:hover,.ai-grid article:hover,.why-grid article:hover,.steps article:hover{
  background:rgba(2,28,61,.78)!important;
  border-color:rgba(32,243,251,.26)!important;
  box-shadow:none!important;
}
.service.featured{background:linear-gradient(135deg,rgba(2,28,61,.92),rgba(10,127,219,.10))!important}
.icon,.ai-index,.service-num{color:var(--brand-electric-cyan)!important}
.service p,.ai-grid p,.why-grid p,.steps p{color:#AABCCD!important}

/* Tags: functional labels, not excessive pills */
.tags span,.tool-cloud span{
  border-radius:4px!important;
  border-color:rgba(32,243,251,.22)!important;
  color:#A9DDE5!important;
  background:rgba(32,243,251,.025)!important;
}

/* Shopify section — use brand system rather than unrelated green/icon treatment */
.shopify{background:var(--brand-night-blue)!important;border-color:var(--brand-line)!important}
.shopify-mark{
  width:250px!important;height:250px!important;border-radius:24px!important;
  border:1px solid rgba(32,243,251,.34)!important;
  background:radial-gradient(circle at 50% 50%,rgba(32,243,251,.16),rgba(2,28,61,.72) 55%,var(--brand-deep-navy) 100%)!important;
  box-shadow:0 0 80px rgba(32,243,251,.12)!important;
  color:var(--brand-electric-cyan)!important;
}
.shopify-mark:before{content:'◎';font-size:170px;font-weight:400;color:var(--brand-electric-cyan)}
.shopify-mark{font-size:0}
.grid-glow{background-image:linear-gradient(rgba(32,243,251,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(32,243,251,.06) 1px,transparent 1px)!important}

/* Data/UI surfaces */
.dashboard{background:var(--brand-night-blue)!important;border-color:var(--brand-line)!important;box-shadow:none!important;border-radius:var(--brand-radius)!important}
.metric-row div,.chart{background:rgba(1,20,52,.72)!important;border-color:var(--brand-line)!important}
.bars i{background:linear-gradient(to top,var(--brand-signal-blue),var(--brand-electric-cyan))!important}

/* Keep cyan a signal color, not the default for everything */
.trust-line{color:#7890A6!important}
.cap-list,.cap-list div{border-color:var(--brand-line)!important}
.cap-list strong{color:var(--brand-electric-cyan)!important}
.cap-list span{color:#C1CFDC!important}
.architecture div{background:var(--brand-night-blue)!important;border-color:var(--brand-line)!important}
.architecture b{color:var(--brand-electric-cyan)!important}

/* Contact / footer */
.contact-panel{background:radial-gradient(circle at 85% 30%,rgba(32,243,251,.08),transparent 35%),var(--brand-night-blue)!important;border-color:rgba(32,243,251,.24)!important}
.contact-action small,.footer-brand p{color:#8298AD!important}
.footer{border-color:var(--brand-line)!important}
.footer-brand:after{content:'DEEPDELL';display:block;margin-top:-45px;margin-left:55px;font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--brand-white)}
.footer-bottom{border-color:var(--brand-line)!important}

/* Accessibility and responsive logo behavior */
:focus-visible{outline:2px solid var(--brand-electric-cyan);outline-offset:3px}
@media(max-width:700px){
  .site-header{height:70px!important;padding:0 18px!important}
  .brand img{width:38px!important;height:38px!important}
  .brand:after{font-size:18px}
  .site-header.menu-open .nav{top:70px!important;background:var(--brand-deep-navy)!important;border-bottom:1px solid var(--brand-line)!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Production logo lockup: supplied DEEPDELL orbital mark + precise wordmark. */
.brand,.footer-brand>a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.brand img,.footer-brand>a img{width:34px!important;height:34px!important;object-fit:contain;display:block}
.brand-wordmark{font-family:Manrope,Arial,sans-serif;font-size:21px;font-weight:800;line-height:1;letter-spacing:-.055em;color:#fff}
.footer-brand>a .brand-wordmark{font-size:24px}
@media(max-width:1050px){.brand img,.footer-brand>a img{width:32px!important;height:32px!important}.brand-wordmark{font-size:19px}}
@media(max-width:700px){.brand img,.footer-brand>a img{width:30px!important;height:30px!important}.brand-wordmark{font-size:18px}}

.footer-brand>a.footer-logo,.footer-brand>a{display:inline-flex;align-items:center}.footer-attached-logo{width:118px!important;height:118px!important;object-fit:contain;display:block;border-radius:0}.footer-brand>a:has(.footer-attached-logo){margin-bottom:16px}@media(max-width:700px){.footer-attached-logo{width:96px!important;height:96px!important}}

/* Final DEEPDELL logo lockup: use the supplied orbital artwork with its web-ready wordmark. */
.brand:after,.footer-brand:after{content:none!important;display:none!important}
.brand,.footer-brand>a{display:inline-flex!important;align-items:center!important;gap:0!important;white-space:nowrap!important;text-decoration:none!important}
.brand img{width:168px!important;height:auto!important;max-height:48px!important;object-fit:contain!important;display:block!important}
.footer-brand>a img{width:190px!important;height:auto!important;max-height:58px!important;object-fit:contain!important;display:block!important}
@media(max-width:1050px){.brand img{width:154px!important}.footer-brand>a img{width:175px!important}}
@media(max-width:700px){.brand img{width:142px!important;max-height:42px!important}.footer-brand>a img{width:165px!important;max-height:50px!important}}

/* FINAL HEADER FIX — stable logo + mobile navigation */
.site-header{position:sticky!important;top:0!important;z-index:5000!important}
.site-header .brand{display:inline-flex!important;align-items:center!important;gap:9px!important;flex:0 0 auto!important;min-width:0!important;height:48px!important}
.site-header .brand img{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;display:block!important;flex:0 0 38px!important}
.site-header .brand-wordmark{display:inline-block!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:21px!important;font-weight:900!important;line-height:1!important;letter-spacing:-1.7px!important;white-space:nowrap!important}
.site-header .nav{display:flex!important;align-items:center!important}
.site-header .menu{display:none!important;position:relative!important;z-index:5002!important;border:0!important;background:transparent!important}
@media(max-width:950px){
 .site-header{height:68px!important;padding:0 20px!important}
 .site-header .nav{display:none!important}
 .site-header .menu{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;padding:7px!important;cursor:pointer!important}
 .site-header .menu i{display:block!important;width:23px!important;height:2px!important;margin:3px 0!important;background:#fff!important}
 .site-header.menu-open .nav{display:flex!important;position:absolute!important;top:68px!important;left:0!important;right:0!important;width:100%!important;box-sizing:border-box!important;padding:12px 20px 20px!important;background:#011434!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;border-bottom:1px solid rgba(137,249,253,.18)!important;box-shadow:0 18px 45px rgba(0,0,0,.45)!important;z-index:5001!important}
 .site-header.menu-open .nav a{display:block!important;width:100%!important;box-sizing:border-box!important;padding:14px 4px!important;color:#d5e3ef!important;font-size:14px!important;line-height:1.25!important}
 .site-header.menu-open .nav a:hover{color:#20f3fb!important}
 .site-header.menu-open .menu i:first-child{transform:translateY(4px) rotate(45deg)!important}
 .site-header.menu-open .menu i:last-child{transform:translateY(-4px) rotate(-45deg)!important}
 .site-header.menu-open .header-cta{display:none!important}
}
@media(max-width:600px){
 .site-header{padding:0 16px!important}
 .site-header .brand{gap:8px!important}
 .site-header .brand img{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important;flex-basis:32px!important}
 .site-header .brand-wordmark{font-size:19px!important;letter-spacing:-1.45px!important}
}
@media(max-width:360px){
 .site-header .brand img{width:29px!important;height:29px!important;max-width:29px!important;max-height:29px!important;flex-basis:29px!important}
 .site-header .brand-wordmark{font-size:17px!important;letter-spacing:-1.2px!important}
}


/* DEEPDELL LAB navigation submenu — final alignment */
.site-header .nav .nav-group{position:relative;display:flex;align-items:center;height:100%}
.site-header .nav .nav-group-toggle{appearance:none;border:0;background:transparent;color:#d5e3ef;font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:12px 10px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.site-header .nav .nav-group-toggle:after{content:'⌄';font-size:11px;color:#20f3fb;line-height:1;transform:translateY(-1px)}
.site-header .nav .nav-submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:236px;box-sizing:border-box;padding:7px;background:#011434;border:1px solid rgba(137,249,253,.18);border-radius:5px;box-shadow:0 18px 40px rgba(0,0,0,.48);display:none;flex-direction:column;z-index:6000}
.site-header .nav .nav-submenu:before{content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;background:#011434;border-left:1px solid rgba(137,249,253,.18);border-top:1px solid rgba(137,249,253,.18);transform:translateX(-50%) rotate(45deg)}
.site-header .nav .nav-submenu a{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;box-sizing:border-box!important;min-height:42px!important;padding:10px 13px!important;color:#d5e3ef!important;text-decoration:none;white-space:nowrap;font-size:12px!important;font-weight:600!important;line-height:1.2!important;border-radius:3px}
.site-header .nav .nav-submenu a:hover,.site-header .nav .nav-submenu a:focus-visible{color:#20f3fb!important;background:rgba(32,243,251,.06)}
.site-header .nav .nav-group:hover .nav-submenu,.site-header .nav .nav-group:focus-within .nav-submenu,.site-header .nav .nav-group.open .nav-submenu{display:flex}
@media(max-width:950px){
 .site-header.menu-open .nav .nav-group{display:block!important;height:auto!important;width:100%!important}
 .site-header.menu-open .nav .nav-group-toggle{width:100%!important;justify-content:space-between!important;padding:14px 4px!important;color:#d5e3ef!important;font-size:14px!important}
 .site-header.menu-open .nav .nav-group-toggle:after{transition:transform .15s ease}
 .site-header.menu-open .nav .nav-group.open .nav-group-toggle:after{transform:rotate(180deg)}
 .site-header.menu-open .nav .nav-submenu,.site-header .nav .nav-group:hover .nav-submenu,.site-header .nav .nav-group:focus-within .nav-submenu{position:static!important;transform:none!important;display:none!important;width:100%!important;min-width:0!important;padding:3px 0 7px 10px!important;border:0!important;border-left:1px solid rgba(137,249,253,.18)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
 .site-header.menu-open .nav .nav-group.open .nav-submenu{display:flex!important}
 .site-header.menu-open .nav .nav-submenu:before{display:none!important}
 .site-header.menu-open .nav .nav-submenu a{min-height:40px!important;padding:9px 10px!important;font-size:13px!important;color:#9db3ca!important}
}