/* ZEO High-Tech V5 — adaptive visual system */
:root{
  --zeo-night:#050b16;
  --zeo-deep:#071426;
  --zeo-panel:#0b2038;
  --zeo-cyan:#28dcff;
  --zeo-blue:#4c79ff;
  --zeo-violet:#8b68ff;
  --zeo-mint:#54e4ae;
  --zeo-coral:#ff6f82;
  --zeo-amber:#ffb75d;
  --zeo-white:#f7fbff;
  --zeo-ink:#102840;
  --zeo-muted:#6d8297;
  --zeo-line:rgba(21,82,128,.13);
  --zeo-glass:rgba(255,255,255,.82);
  --pointer-x:70%;
  --pointer-y:12%;
}

html{scroll-behavior:smooth}
body.zeo-hightech{
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(40,220,255,.18),transparent 25rem),
    radial-gradient(circle at 12% 82%,rgba(139,104,255,.16),transparent 28rem),
    linear-gradient(145deg,#030811,#071426 52%,#0b1630);
  overflow-x:hidden;
}
body.zeo-hightech:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;
  background-image:linear-gradient(rgba(76,165,220,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(76,165,220,.12) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%);
  animation:zeoGridShift 24s linear infinite;
}

.zeo-hightech .app-shell{
  isolation:isolate;background:linear-gradient(150deg,#f4f8fc,#edf4fa 58%,#f7f5ff);
  box-shadow:0 35px 110px rgba(0,5,18,.48),inset 0 1px rgba(255,255,255,.8);
}
.zeo-hightech .app-shell:before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(circle at 92% 20%,rgba(53,197,255,.09),transparent 22rem),radial-gradient(circle at 10% 72%,rgba(139,104,255,.08),transparent 26rem);
}

/* Header */
.zeo-hightech .topbar{
  background:linear-gradient(105deg,rgba(5,13,26,.97),rgba(8,29,52,.94));
  border-bottom-color:rgba(86,216,255,.14);box-shadow:0 14px 38px rgba(1,10,23,.19);
}
.zeo-hightech .brand{transition:transform .24s ease}
.zeo-hightech .brand:hover{transform:translateY(-1px)}
.zeo-hightech .brand strong{
  font-size:21px;background:linear-gradient(95deg,#fff,#73eaff 52%,#a68aff);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
}
.zeo-hightech .brand small{color:#7fa3bd}
.zeo-hightech .zeo-mark{position:relative;background:linear-gradient(145deg,rgba(40,220,255,.14),rgba(139,104,255,.12));border:1px solid rgba(108,224,255,.2);box-shadow:0 0 30px rgba(40,213,245,.24),inset 0 1px rgba(255,255,255,.1);animation:zeoMarkFloat 5s ease-in-out infinite}
.zeo-hightech .zeo-mark:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(64,217,255,.14);border-radius:18px;animation:zeoOrbit 8s linear infinite}
.zeo-hightech .icon-btn,.zeo-hightech .avatar-btn{backdrop-filter:blur(12px);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.zeo-hightech .icon-btn:hover,.zeo-hightech .avatar-btn:hover{transform:translateY(-2px);border-color:rgba(96,223,255,.34);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.zeo-hightech .avatar-btn{background:linear-gradient(135deg,#28dcff,#567cff 52%,#9b69ff);color:#061421;box-shadow:0 8px 24px rgba(49,154,255,.25)}
.zeo-status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(77,228,175,.18);border-radius:999px;background:rgba(255,255,255,.06);color:#91efca;font-size:8px;font-weight:900;letter-spacing:.13em;white-space:nowrap}
.zeo-status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--zeo-mint);box-shadow:0 0 0 0 rgba(84,228,174,.5);animation:zeoPulse 2s infinite}

/* Hero */
.zeo-hightech .hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 86% 8%,rgba(40,220,255,.26),transparent 17rem),
    radial-gradient(circle at 28% 110%,rgba(139,104,255,.3),transparent 22rem),
    linear-gradient(145deg,#050d1b,#092742 62%,#0c3452);
  border-bottom:1px solid rgba(102,220,255,.16);box-shadow:0 25px 65px rgba(4,24,46,.2);
}
.zeo-hightech .hero:before{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:linear-gradient(rgba(95,222,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(95,222,255,.25) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:linear-gradient(100deg,transparent,black);mask-image:linear-gradient(100deg,transparent,black);animation:zeoGridShift 18s linear infinite}
.zeo-hightech .hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(102,230,255,.16);border-radius:50%;right:-120px;bottom:-130px;box-shadow:0 0 0 42px rgba(76,121,255,.025),0 0 0 84px rgba(139,104,255,.018);animation:zeoOrb 9s ease-in-out infinite alternate}
.zeo-hightech .hero>*{position:relative;z-index:1}
.zeo-hightech .eyebrow{color:#1884ab;letter-spacing:.17em}
.zeo-hightech .hero .eyebrow{color:#71e8ff}
.zeo-hightech .hero h1{font-weight:850;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 14px 35px rgba(0,0,0,.18)}
.zeo-hightech .hero-copy{color:#c0d2e2}
.zeo-hightech .live-pill{background:linear-gradient(110deg,rgba(40,220,255,.12),rgba(139,104,255,.1));border-color:rgba(93,222,255,.23);box-shadow:inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(9px)}
.zeo-hightech .live-pill:before{animation:zeoPulse 2s infinite}
.zeo-hightech .zeo-brief{position:relative;overflow:hidden;background:linear-gradient(120deg,rgba(255,255,255,.1),rgba(255,255,255,.045));border-color:rgba(112,222,255,.17);box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 36px rgba(0,4,18,.12);backdrop-filter:blur(14px);transition:transform .25s ease,background .25s ease}
.zeo-hightech .zeo-brief:hover{transform:translateY(-3px);background:linear-gradient(120deg,rgba(255,255,255,.135),rgba(255,255,255,.06))}
.zeo-hightech .zeo-brief img{filter:drop-shadow(0 8px 18px rgba(40,220,255,.2));animation:zeoMarkFloat 4.5s ease-in-out infinite}

/* Content cards */
.zeo-hightech .content{position:relative}
.zeo-hightech .section-head h2{color:#102a43;font-weight:850;letter-spacing:-.025em}
.zeo-hightech .section-head button{color:#097da4;transition:transform .2s ease,color .2s ease}
.zeo-hightech .section-head button:hover{color:#536bff;transform:translateX(2px)}
.zeo-hightech .metrics{gap:12px}
.zeo-hightech .metric-card{
  position:relative;overflow:hidden;border-color:var(--zeo-line);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,251,255,.78));
  box-shadow:0 17px 42px rgba(17,65,104,.1),inset 0 1px #fff;backdrop-filter:blur(13px);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.zeo-hightech .metric-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#28dcff,#4c79ff);opacity:.82}
.zeo-hightech .metric-card:nth-child(2):before{background:linear-gradient(90deg,#8b68ff,#c26cff)}
.zeo-hightech .metric-card:nth-child(3):before{background:linear-gradient(90deg,#54e4ae,#27c892)}
.zeo-hightech .metric-card:nth-child(4):before{background:linear-gradient(90deg,#ffb75d,#ff6f82)}
.zeo-hightech .metric-card:hover{transform:translateY(-4px);border-color:rgba(45,174,225,.24);box-shadow:0 24px 55px rgba(17,65,104,.16),inset 0 1px #fff}
.zeo-hightech .metric-card strong{font-size:27px;background:linear-gradient(115deg,#102d48,#316aff 65%,#18b7d7);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.035em}
.zeo-hightech .metric-card span{font-weight:750}

.zeo-hightech .action-card,.zeo-hightech .item-card,.zeo-hightech .crm-card,.zeo-hightech .message-card,.zeo-hightech .calendar-card{
  position:relative;overflow:hidden;border-color:var(--zeo-line);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,251,255,.78));
  box-shadow:0 10px 28px rgba(16,61,98,.07),inset 0 1px #fff;backdrop-filter:blur(12px);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.zeo-hightech .action-card:hover,.zeo-hightech .item-card:hover,.zeo-hightech .crm-card:hover,.zeo-hightech .message-card:hover{transform:translateX(4px);border-color:rgba(38,176,219,.25);box-shadow:0 16px 38px rgba(16,68,108,.12),inset 0 1px #fff}
.zeo-hightech .action-card .action-icon{background:linear-gradient(145deg,#e2f8ff,#eef0ff);color:#116da5;box-shadow:0 8px 22px rgba(36,112,188,.1);transition:transform .24s ease}
.zeo-hightech .action-card:hover .action-icon{transform:scale(1.08) rotate(-4deg)}
.zeo-hightech .stack>*:nth-child(2) .action-icon{background:linear-gradient(145deg,#f0ebff,#faefff);color:#7652cf}
.zeo-hightech .stack>*:nth-child(3) .action-icon{background:linear-gradient(145deg,#e8fbf4,#effdf8);color:#17896a}
.zeo-hightech .chevron{transition:transform .22s ease,color .22s ease}.zeo-hightech .action-card:hover .chevron{transform:translateX(3px);color:#247ca6}
.zeo-hightech .client-avatar{background:linear-gradient(145deg,#dff8ff,#ece9ff);border:1px solid rgba(69,166,218,.12);box-shadow:0 8px 22px rgba(26,100,157,.09);color:#176a99}
.zeo-hightech .message-card.unread{border-color:rgba(40,210,239,.32);background:linear-gradient(145deg,#f5fdff,#f7f5ff)}
.zeo-hightech .message-card.unread:after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:linear-gradient(#28dcff,#8b68ff)}

/* Controls */
.zeo-hightech .primary-btn{color:#061421;background:linear-gradient(115deg,#28dcff,#4c79ff 58%,#8b68ff);box-shadow:0 11px 28px rgba(55,112,236,.22);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.zeo-hightech .primary-btn:hover{transform:translateY(-2px);filter:saturate(1.16) brightness(1.04);box-shadow:0 16px 34px rgba(55,112,236,.3)}
.zeo-hightech .secondary-btn{background:#edf4fa;border:1px solid rgba(26,87,132,.08);transition:.2s ease}.zeo-hightech .secondary-btn:hover{background:#e5f4fb;color:#0d6e96}
.zeo-hightech .filters{padding:2px 1px 8px}
.zeo-hightech .filter{border-color:rgba(26,86,131,.12);background:rgba(255,255,255,.74);box-shadow:0 6px 18px rgba(20,65,100,.045);transition:.2s ease}
.zeo-hightech .filter:hover{transform:translateY(-1px);border-color:rgba(39,177,218,.25)}
.zeo-hightech .filter.active{color:#0a4d6c;background:linear-gradient(120deg,#dcf9ff,#eae7ff);border-color:rgba(47,189,224,.29);box-shadow:0 8px 20px rgba(42,153,200,.11)}
.zeo-hightech .search-wrap input{border-color:rgba(27,89,136,.13);background:rgba(255,255,255,.84);box-shadow:0 10px 28px rgba(17,62,98,.07);transition:.22s ease}
.zeo-hightech .search-wrap input:focus{border-color:rgba(40,190,229,.46);box-shadow:0 0 0 4px rgba(40,220,255,.09),0 13px 32px rgba(17,69,107,.1)}

/* Mobile nav */
.zeo-hightech .bottom-nav{background:rgba(250,253,255,.9);border-top-color:rgba(22,83,129,.11);box-shadow:0 -15px 38px rgba(8,27,45,.11);backdrop-filter:blur(22px) saturate(1.4)}
.zeo-hightech .nav-item{transition:transform .2s ease,color .2s ease}.zeo-hightech .nav-item:hover{transform:translateY(-2px);color:#375b81}
.zeo-hightech .nav-item.active{color:#0b87ae}.zeo-hightech .nav-item.active .nav-icon{filter:drop-shadow(0 4px 8px rgba(18,161,205,.24))}
.zeo-hightech .nav-item em{background:linear-gradient(135deg,#ff6f82,#ef4766);box-shadow:0 5px 14px rgba(232,73,98,.25)}
.zeo-hightech .nav-main{background:linear-gradient(145deg,#28dcff,#4c79ff 58%,#8b68ff);border-color:#eef5fa;box-shadow:0 13px 32px rgba(42,132,236,.34),0 0 0 1px rgba(60,199,245,.18);color:#fff;transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease}
.zeo-hightech .nav-main:hover{transform:translateY(-27px) scale(1.05);box-shadow:0 18px 38px rgba(42,132,236,.42)}

/* Dialogs */
.zeo-hightech .sheet-dialog::backdrop,.zeo-hightech .detail-dialog::backdrop{background:rgba(1,7,17,.68);backdrop-filter:blur(9px)}
.zeo-hightech .sheet-card,.zeo-hightech .detail-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,248,253,.97));border:1px solid rgba(87,188,225,.14);box-shadow:0 35px 100px rgba(0,8,24,.42)}
.zeo-hightech .role-option,.zeo-hightech .quick-action{border-color:var(--zeo-line);background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 8px 24px rgba(17,60,95,.05);transition:.22s ease}
.zeo-hightech .role-option:hover,.zeo-hightech .quick-action:hover{transform:translateY(-3px);border-color:rgba(41,184,224,.28);box-shadow:0 14px 32px rgba(17,70,109,.1)}
.zeo-hightech .role-option.active{border-color:#54dff5;background:linear-gradient(145deg,#f1fdff,#f3f0ff);box-shadow:0 0 0 3px rgba(40,213,245,.1),0 13px 30px rgba(36,133,177,.1)}
.zeo-hightech .quick-action span{background:linear-gradient(145deg,#e2f9ff,#eeebff);color:#116e9b}
.zeo-hightech .detail-section{border-color:rgba(24,83,128,.11)}
.zeo-hightech .timeline-dot{background:linear-gradient(135deg,#28dcff,#6d70ff);box-shadow:0 0 0 4px #e4f9fd,0 0 16px rgba(40,220,255,.32)}
.zeo-hightech .form-field input,.zeo-hightech .form-field textarea{border-color:rgba(23,85,132,.13);background:rgba(255,255,255,.8)}
.zeo-hightech .toast{background:linear-gradient(115deg,#071827,#123c62 62%,#332b69);border:1px solid rgba(92,220,255,.2);box-shadow:0 20px 50px rgba(0,7,20,.38)}

/* Motion layer */
.zeo-hightech .zeo-reveal{opacity:0;transform:translateY(14px) scale(.985)}
.zeo-hightech .zeo-reveal.zeo-visible{opacity:1;transform:none;transition:opacity .52s ease var(--zeo-delay,0ms),transform .52s cubic-bezier(.2,.75,.2,1) var(--zeo-delay,0ms)}
.zeo-ripple{position:absolute;z-index:5;border-radius:50%;background:rgba(255,255,255,.48);transform:scale(0);pointer-events:none;animation:zeoRipple .55s ease-out}

/* Desktop cockpit */
@media (min-width:900px){
  body.zeo-hightech{padding:20px;display:grid;place-items:center}
  .zeo-hightech .app-shell{width:min(calc(100vw - 40px),1240px);height:calc(100dvh - 40px);min-height:680px;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:78px minmax(0,1fr);padding:0;border-radius:30px;overflow:hidden}
  .zeo-hightech .topbar{grid-column:1/-1;grid-row:1;padding:15px 24px;border-radius:0}
  .zeo-hightech .main-view{grid-column:2;grid-row:2;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(340px,.78fr) minmax(470px,1.36fr);align-items:stretch;scrollbar-color:#afc6d7 transparent;scrollbar-width:thin}
  .zeo-hightech .main-view>.hero{position:sticky;top:0;align-self:start;min-height:100%;height:max(100%,620px);border-radius:0;padding:42px 34px;display:flex;flex-direction:column;justify-content:center}
  .zeo-hightech .main-view>.content{padding:30px 32px 42px;min-width:0}
  .zeo-hightech .main-view>.content .metrics{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .zeo-hightech .hero h1{font-size:clamp(34px,3.1vw,48px);max-width:470px}
  .zeo-hightech .hero-copy{font-size:15px;max-width:470px}
  .zeo-hightech .zeo-brief{margin-top:28px;padding:19px}
  .zeo-hightech .bottom-nav{position:relative;left:auto;bottom:auto;transform:none;grid-column:1;grid-row:2;width:auto;min-height:0;height:100%;padding:16px 10px;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(72px,1fr));align-items:stretch;background:linear-gradient(180deg,#061321,#091e33 60%,#071523);border-top:0;border-right:1px solid rgba(87,213,255,.13);box-shadow:12px 0 38px rgba(5,22,39,.12);backdrop-filter:none}
  .zeo-hightech .nav-item{min-height:0;color:#7595ad;font-size:9px;border-radius:17px;margin:3px 0}
  .zeo-hightech .nav-item:hover{transform:translateX(2px);color:#d7f6ff;background:rgba(255,255,255,.045)}
  .zeo-hightech .nav-item.active{color:#fff;background:linear-gradient(130deg,rgba(40,164,255,.25),rgba(139,104,255,.18));border:1px solid rgba(86,218,255,.14);box-shadow:inset 3px 0 #28dcff,0 10px 25px rgba(0,24,60,.2)}
  .zeo-hightech .nav-icon{font-size:22px}
  .zeo-hightech .nav-item em{right:16px;top:8px}
  .zeo-hightech .nav-main{align-self:center;justify-self:center;transform:none;width:66px;height:66px;min-height:66px;border:4px solid rgba(8,29,49,.95);box-shadow:0 12px 32px rgba(38,119,228,.32)}
  .zeo-hightech .nav-main:hover{transform:scale(1.06) rotate(2deg)}
  .zeo-hightech .sheet-dialog{margin:auto;width:min(620px,calc(100% - 32px))}.zeo-hightech .sheet-card{border-radius:28px;padding:14px 22px 24px}
  .zeo-hightech .detail-dialog{width:min(720px,calc(100% - 40px))}
  .zeo-hightech .detail-card{padding:25px}
}

@media (min-width:1180px){
  .zeo-hightech .main-view{grid-template-columns:minmax(390px,.82fr) minmax(560px,1.35fr)}
  .zeo-hightech .main-view>.content .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .zeo-hightech .metric-card{padding:16px 14px}.zeo-hightech .metric-card strong{font-size:25px}
}

@media (max-width:560px){
  .zeo-status{display:none}
  .zeo-hightech .hero{padding-bottom:35px}
  .zeo-hightech .metric-card{padding:14px}
  .zeo-hightech .metric-card strong{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .zeo-hightech .zeo-reveal{opacity:1;transform:none}
}

@keyframes zeoGridShift{to{background-position:42px 0}}
@keyframes zeoMarkFloat{50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes zeoOrbit{to{transform:rotate(360deg)}}
@keyframes zeoOrb{to{transform:translate(-18px,-12px) scale(1.08)}}
@keyframes zeoPulse{70%{box-shadow:0 0 0 9px rgba(84,228,174,0)}100%{box-shadow:0 0 0 0 rgba(84,228,174,0)}}
@keyframes zeoRipple{to{transform:scale(4);opacity:0}}