/* site-shell.css */
/* Shared site shell based on home page liquid glass style */
:root{
  --ease: cubic-bezier(.2,.9,.2,1);
  --dur: 520ms;

  --bg: #EAF7F4;
  --bg2:#DFF3EE;

  --drawer-bg1: color-mix(in srgb, #ffffff 85%, var(--bg) 15%);
  --drawer-bg2: color-mix(in srgb, #f6fbff 78%, var(--bg2) 22%);
  --drawer-accent: rgba(68,169,255,.28);
  --drawer-surface: #ffffff;

  --tile-bg: #ffffff;

  --text: rgba(10, 25, 34, .88);
  --muted: rgba(10, 25, 34, .62);

  --glass: rgba(255,255,255,.44);
  --glass2: rgba(255,255,255,.62);
  --stroke: rgba(10, 35, 45, .12);

  --shadow: 0 22px 70px rgba(10, 35, 45, .12);
  --shadow2: 0 12px 32px rgba(10, 35, 45, .10);

  --nav-row: 56px;
  --nav-subrow: 52px;

  --r: 18px;
  --r2: 26px;
  --blur: 16px;

  /* Brand border palette (from your logo vibe) */
  --brand-1: #1fe3d0;
  --brand-2: #2a9bff;
  --brand-3: #7b5cff;
  --brand-4: #ff5cc8;
  --brand-5: #ff7a59;

  /* Border animation speed */
  --border-spin: 5s;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color-scheme: light dark;
}

[data-theme="dark"]{
  --bg: #05090b;
  --bg2:#030608;

  --drawer-bg1: color-mix(in srgb, #0b2028 80%, rgba(42,155,255,.14));
  --drawer-bg2: color-mix(in srgb, #05141a 78%, rgba(31,227,208,.14));
  --drawer-accent: rgba(42,155,255,.40);
  --drawer-surface: #0b2028;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.12);

  --shadow: 0 26px 90px rgba(0,0,0,.48);
  --shadow2: 0 14px 44px rgba(0,0,0,.34);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ direction:ltr; scroll-behavior:auto; }
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  text-rendering: optimizeLegibility;
  scrollbar-gutter: stable;
}

main > section,
main > article,
main > aside{
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 18px 18px 36px; position:relative; z-index:1; }

.grain{
  pointer-events:none;
  position:fixed;
  inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
  animation: grainMove 9s steps(8) infinite;
  transform:translateZ(0);
}
@keyframes grainMove{
  0%{transform:translate(-3%, -2%)}
  20%{transform:translate(2%, -4%)}
  40%{transform:translate(5%, 3%)}
  60%{transform:translate(-4%, 6%)}
  80%{transform:translate(-6%, -3%)}
  100%{transform:translate(-3%, -2%)}
}

.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.blob{ position:absolute; filter: blur(26px); opacity:.55; animation: blobFloat 8s var(--ease) infinite alternate; }
.blob.b1{ width:380px; height:380px; left:-120px; top:-80px; background: radial-gradient(circle, rgba(31,227,208,.45), transparent 60%); }
.blob.b2{ width:420px; height:420px; right:-140px; top:-70px; background: radial-gradient(circle, rgba(123,92,255,.28), transparent 62%); animation-delay: 240ms;}
.blob.b3{ width:520px; height:520px; left:30%; bottom:-260px; background: radial-gradient(circle, rgba(255,92,200,.22), transparent 62%); animation-delay: 520ms;}
@keyframes blobFloat{
  from{ transform: translateY(0) translateX(0) scale(1); }
  to{ transform: translateY(18px) translateX(10px) scale(1.04); }
}

.glass{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.55), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(42,155,255,.10), transparent 62%);
  filter: blur(18px);
  opacity:.40;
  pointer-events:none;
}
[data-theme="dark"] .glass::before{
  opacity:.30;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.28), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(42,155,255,.16), transparent 62%);
}

/* =========================
   Animated border (NO GLOW)
   - border stays fixed
   - only gradient phase shifts
   ========================= */
@property --spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.animated-border{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border: 1.5px solid transparent; /* thicker & crisp */
  transform: translateZ(0);
}
.animated-border::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1.5px; /* must match border thickness for crisp edges */
  background:
    conic-gradient(
      from var(--spin),
      var(--brand-1),
      var(--brand-2),
      var(--brand-3),
      var(--brand-4),
      var(--brand-5),
      var(--brand-1)
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  animation: borderPhase var(--border-spin) linear infinite;
}
@keyframes borderPhase{
  from{ --spin: 0deg; }
  to{ --spin: 360deg; }
}
@media (prefers-reduced-motion: reduce){
  .animated-border::before{ animation: none; }
}

/* =========================
   Topbar (visible + styled)
   ========================= */
header.topbar{
  position:sticky;
  top:0;
  z-index:60;
  padding: 0;
  background: transparent;
}
header.topbar > .wrap{
  width:98%;
  max-width:none;
  margin-inline:auto;
  padding-top:12px;
  padding-bottom:16px;
}

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height: 70px;
  padding: 0 12px;
  border-radius: 22px;
  position:relative;

  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.topbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-right{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex-shrink:1;min-width:0;}
.topbar-right .text-btn,.topbar-right .pill{min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--home-header-btn-border,#8ea7ba);background:var(--home-header-btn-bg,#f5fbff);color:var(--txt1,#0a1922);cursor:pointer;font-weight:650;font-size:13px;}
.topbar-right .text-btn{background:var(--home-header-btn-bg,#f5fbff);color:var(--txt1,#0a1922);}
.topbar-right .text-btn:hover{background:var(--home-header-btn-bg-hover,#e7f3ff);}
.topbar-right .pill{background:var(--home-header-signup-bg,#2a9bff);color:var(--home-header-signup-text,#ffffff);border-color:var(--home-header-signup-border,#2a9bff);}
.topbar-right .pill:hover{background:var(--home-header-signup-bg-hover,#1f87e6);}
[data-theme="dark"] .topbar-right .text-btn{background:var(--home-header-btn-bg-dark,#102433);color:var(--txt1,#f4f9ff);border-color:var(--home-header-btn-border-dark,#3a5469);}
[data-theme="dark"] .topbar-right .text-btn:hover{background:var(--home-header-btn-bg-hover-dark,#173447);}
[data-theme="dark"] .topbar-right .pill{background:var(--home-header-signup-bg-dark,#2de3d4);color:var(--home-header-signup-text-dark,#032029);border-color:var(--home-header-signup-border-dark,#2de3d4);}
[data-theme="dark"] .topbar-right .pill:hover{background:var(--home-header-signup-bg-hover-dark,#25c4b7);}
@media (max-width: 760px){.topbar-right{gap:6px;}.topbar-right .text-btn,.topbar-right .pill{min-height:34px;padding:0 10px;font-size:12px;}}

.topbar-row{
  color:var(--text);
}
.topbar-right .text-btn,.topbar-right .pill{
  text-shadow:none;
}

.brand-center{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
  height: 70px;
}
.brand-center__label{
  font-size: 17px;
  line-height: 70px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 700;
  white-space: nowrap;
}

/* Apply animated border ONLY to the topbar container */
.topbar-row.animated-border{
  border-color: transparent;
}

/* Icons: must be fully transparent (no bg, no border) */
.icon-btn{
  width:44px;
  height:44px;
  border-radius: 14px;
  cursor:pointer;
  transition: transform 220ms var(--ease), opacity 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display:grid;
  place-items:center;
  color:var(--text);
}
.icon-btn.glass{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.icon-btn.glass::before{
  content: none !important;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn:active{ transform: translateY(0) scale(.98); }

.icon{ display:grid; place-items:center; color:var(--text); opacity:.94; }
.icon svg{
  width:22px;
  height:22px;
}
.hamburger-lines{ display:grid; gap:5px; }
.hamburger-lines span{
  display:block;
  width:20px;
  height:2.4px;
  border-radius:999px;
  background: currentColor;
}
/* Logo container must also be transparent */
.logo-slot{
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.logo-img{ height:58px; width:58px; object-fit:contain; }
.logo-glow{ display:none !important; }

/* Theme toggle icons */
.theme-toggle{ position:relative; }
.theme-toggle__icon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
  opacity:0;
  transform: scale(.8);
}
.theme-toggle__moon{ opacity:1; }
[data-theme="dark"] .theme-toggle__moon{ opacity:0; transform: scale(.8) rotate(-10deg); }
[data-theme="dark"] .theme-toggle__sun{ opacity:1; transform: scale(1); }

/* =========================
   AI Support widget
   ========================= */
.support-widget{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.support-widget__fab{
  border: none;
  border-radius: 999px;
  width: 56px;
  height: 56px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(140deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  box-shadow: var(--shadow2);
  cursor: pointer;
}
.support-widget__fab svg{
  width: 26px;
  height: 26px;
  display: block;
  color: #111;
}
.drawer__close svg{
  color: #111;
}

.support-widget__panel{
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
}

.support-widget[data-open="false"] .support-widget__panel{
  display: none;
}

.support-widget__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
}

.support-widget__title{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.support-chat__messages{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 220px;
}

.support-chat__message{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 82%;
}

.support-chat__message--user{
  align-self: flex-end;
  text-align: right;
}

.support-chat__message--agent{
  align-self: flex-start;
  text-align: left;
}

.support-chat__name{
  font-size: 12px;
  color: var(--muted);
}

.support-chat__bubble{
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}

.support-chat__message--user .support-chat__bubble{
  background: rgba(42, 155, 255, .16);
  border: 1px solid rgba(42, 155, 255, .25);
  padding-bottom: 22px;
}

.support-chat__message--agent .support-chat__bubble{
  background: rgba(31, 227, 208, .16);
  border: 1px solid rgba(31, 227, 208, .25);
}

.support-chat__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.support-chat__ticks{
  position: absolute;
  left: 10px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: rgba(42, 155, 255, .7);
}
.support-chat__ticks svg{
  width: 12px;
  height: 12px;
  display: block;
  fill: currentColor;
}

.support-chat__message--typing .support-chat__bubble{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.support-chat__typing-loader{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
.support-chat__typing-loader svg{
  width: 42px;
  height: 20px;
  display: block;
}
.support-chat__typing-loader .svg__stroke{
  stroke: currentColor;
}
.support-chat__typing-text{
  font-size: 13px;
  color: var(--text);
}

.support-chat__form{
  display: flex;
  gap: 10px;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--stroke);
}

.support-chat__input{
  flex: 1;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(255,255,255,.7);
  color: var(--text);
}

.support-chat__send{
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(31,227,208,.2);
  color: var(--text);
  cursor: pointer;
}

.support-widget[data-loading="true"] .support-chat__send{
  opacity: .6;
  cursor: wait;
}

[data-theme="dark"] .support-widget__fab{
  background: linear-gradient(140deg, rgba(15,32,40,.95), rgba(15,32,40,.75));
  color: #fff;
}
[data-theme="dark"] .support-widget__fab svg,
[data-theme="dark"] [data-lang-select] svg,
[data-theme="dark"] .drawer__close svg{
  color: #fff;
}
[data-theme="dark"] .icon-btn.ghost,
[data-theme="dark"] .icon-btn.ghost .icon,
[data-theme="dark"] .icon-btn.ghost svg{
  color: #fff;
}

[data-theme="dark"] .support-chat__input{
  background: rgba(8, 20, 26, .9);
}

/* =========================
   Drawer
   ========================= */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(4, 14, 18, .55);
  opacity:0;
  transition: opacity 260ms var(--ease);
  pointer-events:none;
  z-index:55;
}
.backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0;
  left:0;
  width:min(420px, 92vw);
  height:100vh;
  padding:20px;
  transform: translateX(-104%);
  transition: transform 320ms var(--ease);
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
  direction:ltr;

  background: var(--drawer-surface);
  border:1px solid color-mix(in srgb, var(--stroke) 65%, var(--drawer-accent));
  box-shadow: 0 26px 80px rgba(23, 58, 74, .22);
  overflow:hidden;
  border-radius: 0 22px 22px 0;
}
[data-theme="dark"] .drawer{
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  border-color: color-mix(in srgb, rgba(42,155,255,.40), rgba(255,255,255,.12));
}
.drawer[data-open="true"]{ transform: translateX(0); }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 2px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--stroke) 80%, rgba(42,155,255,.28));
}
.drawer__controls{ display:flex; align-items:center; gap:10px; }
.lang-select{
  min-width: 96px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--drawer-surface) 90%, #fff 10%),
      color-mix(in srgb, var(--drawer-surface) 65%, var(--glass2) 35%));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='rgba(10,25,34,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  color: color-mix(in srgb, var(--text) 88%, var(--stroke));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 0 34px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lang-select:hover{
  border-color: color-mix(in srgb, var(--brand-2) 35%, var(--stroke));
}
.lang-select:focus{
  outline: 2px solid color-mix(in srgb, var(--brand-2) 60%, transparent);
  outline-offset: 2px;
}
[data-lang="fa"] .lang-select{
  direction: rtl;
  text-align: right;
  padding: 0 12px 0 34px;
  background-position: left 12px center;
}
[data-theme="dark"] .lang-select{
  border-color: color-mix(in srgb, rgba(42,155,255,.45), var(--stroke));
  background:
    linear-gradient(135deg,
      rgba(11, 32, 40, .92),
      color-mix(in srgb, var(--drawer-surface) 70%, rgba(8,20,26,.85) 30%));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='rgba(255,255,255,0.75)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  color: color-mix(in srgb, var(--text) 92%, #fff 8%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22);
}
[data-theme="dark"][data-lang="fa"] .lang-select{
  background-position: left 12px center;
}
[data-theme="dark"] .lang-select:hover{
  border-color: color-mix(in srgb, rgba(42,155,255,.75), var(--stroke));
}
.lang-select option{
  color: var(--text);
  background: var(--drawer-surface);
}
[data-theme="dark"] .lang-select option{
  color: color-mix(in srgb, var(--text) 92%, #fff 8%);
  background: #0b2028;
}

/* In drawer head, icons must be transparent too */
.drawer__head .icon-btn{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.drawer__nav{
  display:grid;
  gap:12px;
  padding:4px 2px 12px;
  overflow:auto;
  flex:1;
  min-height:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background: transparent;
}
.drawer__nav::-webkit-scrollbar{ display:none; }
.drawer__group{ display:grid; gap:10px; width:100%; }

/* Items */
.drawer__item,
.drawer__accordion{
  width:100%;
  min-height: var(--nav-row);
  border-radius:16px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition: transform 200ms var(--ease);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  text-align:left;

  background: color-mix(in srgb, var(--drawer-surface) 92%, transparent);
  border: 0;
}
.drawer__item.animated-border,
.drawer__accordion.animated-border{
  border-color: transparent;
}

.drawer__item:hover,
.drawer__accordion:hover{ transform: translateY(-1px); }
.drawer__item:active,
.drawer__accordion:active{ transform: translateY(0); }

.drawer__item:focus-visible,
.drawer__accordion:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand-2) 70%, transparent);
  outline-offset:3px;
}

.drawer__content{ display:flex; align-items:center; gap:12px; flex:1; direction:ltr; }
.drawer__label{ font-weight:700; letter-spacing:.01em; z-index:1; position:relative; }
[data-lang="fa"] .drawer__label{ direction: rtl; text-align:right; }

.drawer__glyph{ width:20px; height:20px; display:grid; place-items:center; color: currentColor; opacity:.94; }
.drawer__glyph svg{ width:20px; height:20px; }

.drawer__chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  transition: transform 260ms var(--ease), color 200ms var(--ease);
  z-index:1;
  color: color-mix(in srgb, var(--text) 80%, rgba(42,155,255,.9));
}
.drawer__chevron svg{ transition: transform 240ms var(--ease); }
.drawer__accordion[aria-expanded="true"] .drawer__chevron{
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--text) 70%, var(--brand-2));
}

.drawer__submenu[hidden]{ display:none !important; }
.drawer__submenu{
  display:grid;
  gap:10px;
  padding:10px 2px 4px 12px;
  border-left: 1px solid color-mix(in srgb, var(--brand-2) 35%, transparent);
}

.drawer__subitem{
  border-radius:14px;
  padding:14px 16px;
  min-height: var(--nav-subrow);
  background: color-mix(in srgb, var(--drawer-surface) 92%, transparent);
  color:var(--text);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition: transform 200ms var(--ease);
  border: 0;
}
.drawer__subitem.animated-border{ border-color: transparent; }
.drawer__subitem:hover{ transform: translateY(-1px); }
.drawer__subitem:active{ transform: translateY(0); }

.drawer__sectionTitle{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  margin:6px 4px 0;
}

.drawer__icon{
  width:18px;
  height:18px;
  color: color-mix(in srgb, var(--muted) 80%, rgba(42,155,255,.65));
  transition: color 200ms var(--ease);
}
[data-theme="dark"] .drawer__icon{ color: color-mix(in srgb, var(--muted) 70%, rgba(42,155,255,.78)); }

.page-main{ position:relative; z-index:1; }
.page-section{
  margin: 20px auto;
  padding: 20px;
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border:1px solid var(--stroke);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  max-width: 1160px;
}
.page-section h1, .page-section h2, .page-section h3, .page-section h4{ margin-top:0; color: var(--text); }
.page-section p{ color: var(--muted); line-height:1.7; }

@media (max-width: 900px){
  .topbar-row{ gap:10px; padding:0 10px; height:64px; }
  .brand-center{ gap:6px; height:64px; }
  .brand-center__label{ font-size:14px; letter-spacing:.1em; line-height:64px; }
  .logo-slot{ width:50px; height:50px; }
  .logo-img{ width:50px; height:50px; }
  .icon-btn{ width:40px; height:40px; }
  .icon svg{ width:20px; height:20px; }
  .hamburger-lines span{ width:18px; height:2.2px; }
  .topbar-right{ gap:6px; }
  .topbar-right .text-btn,.topbar-right .pill{ min-height:34px; padding:0 9px; font-size:11px; }
}

@media (max-width: 720px){
  .topbar-row{ gap:8px; padding:0 8px; height:58px; }
  .topbar-left{ gap:7px; }
  .topbar-right{ gap:5px; }
  .topbar-right .text-btn,.topbar-right .pill{ min-height:30px; padding:0 8px; font-size:10px; }
  .logo-slot{ width:44px; height:44px; }
  .logo-img{ width:44px; height:44px; }
  .icon-btn{ width:36px; height:36px; }
  .icon svg{ width:18px; height:18px; }
  .hamburger-lines span{ width:16px; height:2px; }
  .drawer{ width:100vw; max-width:none; border-radius:0; }
  .topbar-row{ border-radius: 18px; }
  .brand-center{ gap:5px; height:58px; }
  .brand-center__label{ font-size: 12px; letter-spacing: .06em; line-height:58px; }
}

@media (max-width: 520px){
  .topbar-row{ gap:6px; padding:0 6px; height:54px; }
  .topbar-left{ gap:6px; }
  .topbar-right{ gap:4px; }
  .topbar-right .text-btn,.topbar-right .pill{ min-height:28px; padding:0 7px; font-size:9px; }
  .logo-slot{ width:40px; height:40px; }
  .logo-img{ width:40px; height:40px; }
  .icon-btn{ width:34px; height:34px; }
  .brand-center__label{ font-size:11px; letter-spacing:.04em; }
}

body.drawer-animating .grain,
body.drawer-animating .blob {
  animation-play-state: paused !important;
}










/* ✅ STOP HEAVY SHELL ANIMATIONS ONLY */
.grain,
.blob,
.animated-border::before{
  animation: none !important;
}

.drawer,
.backdrop,
.icon-btn,
.drawer__item,
.drawer__accordion,
.drawer__subitem{
  transition: none !important;
}