/* ArchOnTheGo v4.0 – glass design system; visual-only overrides preserving v3.16 tool logic */
:root{--ag-bg:#080d13;--ag-panel:#111b25;--ag-text:#edf1f7;--ag-muted:#aab5c4;--ag-line:rgba(196,219,244,.17);--ag-glass:rgba(159,192,224,.095);--ag-glass-bright:rgba(178,209,236,.16)}
html{scroll-padding-top:92px}
body{background:radial-gradient(ellipse 44% 52% at 6% 6%,rgba(74,103,134,.23),transparent 73%),radial-gradient(ellipse 40% 42% at 82% 80%,rgba(55,89,117,.14),transparent 80%),#090e14;color:var(--ag-text);font-family:Inter,system-ui,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(183,216,248,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(183,216,248,.075) 1px,transparent 1px);background-size:95px 95px;mask-image:linear-gradient(90deg,#000,transparent 75%);z-index:0}
body .main{position:relative;z-index:1}
body.home-active .sidebar{display:none}
body.home-active .main{margin-left:0;padding:0;max-width:none}
.topbar{position:sticky;top:0;z-index:100;gap:18px;align-items:center;min-height:76px;padding:12px clamp(18px,5vw,86px);margin:0;border-bottom:1px solid rgba(176,211,244,.11);background:rgba(10,17,26,.84);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%)}
.home-active .topbar{display:flex;justify-content:space-between;min-height:74px;margin:0;padding:11px clamp(18px,5vw,86px)}
.topbar>div:first-child:not(.ag-header-brand){display:none}
.ag-header-brand{display:flex!important;flex:0 0 auto}
.ag-home-link{appearance:none;border:0;padding:0;background:transparent;display:flex;align-items:center;gap:9px;cursor:pointer;color:#edf2f9;font:700 22px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.055em}
.ag-home-link img{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(172,204,236,.25))}
.ag-desktop-nav{display:flex;gap:clamp(10px,2.2vw,38px);align-items:center;justify-content:center;margin:auto}
.ag-desktop-nav button{appearance:none;background:none;border:0;color:#d1d9e2;font:500 12px Inter,system-ui,sans-serif;cursor:pointer;min-height:42px;padding:7px 0;transition:color .25s ease,transform .25s ease}
.ag-desktop-nav button:hover,.ag-desktop-nav button:focus-visible{color:white;transform:translateY(-1px)}
.topbar .top-actions{display:flex!important;gap:10px!important;align-items:center;flex-wrap:nowrap;justify-content:flex-end}
.home-active .topbar .top-actions{width:auto;display:flex!important;grid-template-columns:none!important}
.topbar #save-project,.topbar #reset-all,.topbar .top-plan{display:none}
.topbar #auth-button{order:2;min-height:39px;white-space:nowrap;border-radius:12px;background:linear-gradient(155deg,rgba(192,216,238,.20),rgba(68,100,132,.07));border:1px solid rgba(205,225,248,.49);box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 5px 12px rgba(0,0,0,.20);padding:9px 18px;font-size:12px;font-weight:600;color:#f7faff;transition:transform .22s ease,background .22s ease,box-shadow .22s ease}
.topbar #auth-button:hover{transform:translateY(-2px);background:rgba(184,215,243,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 7px 18px rgba(0,0,0,.20)}
.topbar .credit-chip{order:1;min-width:auto;min-height:39px;border:1px solid rgba(177,207,237,.27);border-radius:12px;background:rgba(130,162,195,.065);box-shadow:inset 0 1px rgba(255,255,255,.11);padding:6px 13px;display:flex;align-items:center;gap:7px}
.topbar .credit-chip span{font-size:10px;letter-spacing:0;color:#aab5c4}
.topbar .credit-chip strong{font-size:13px;color:#f1f5fc}
.home-active .landing-tab{margin:0!important;padding:0!important}
.ag-shell{width:min(100%,1580px);padding:34px clamp(18px,5vw,86px) 90px;margin:0 auto;position:relative}
.ag-shell:before{content:"";position:absolute;pointer-events:none;inset:0;opacity:.35;background:radial-gradient(ellipse 50% 27% at 53% 48%,rgba(67,102,130,.18),transparent 85%)}
.ag-shell>*{position:relative}
.ag-hero{display:grid;grid-template-columns:minmax(0,.79fr) minmax(0,1.21fr);gap:clamp(32px,4.4vw,76px);align-items:center;margin:5px 0 32px;min-height:360px}
.ag-hero-copy{max-width:590px}
.ag-eyebrow,.ag-kicker{display:flex;align-items:center;gap:9px;color:#aab8c8;font-size:10px;letter-spacing:.20em;font-weight:600}
.ag-eyebrow-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c7d6e5;opacity:.8}
.ag-hero h2{font:700 clamp(47px,5.8vw,89px)/.96 'Space Grotesk',Inter,sans-serif;letter-spacing:-.077em;margin:20px 0 22px;color:#f5f6fa}
.ag-hero h2 span{color:#d2dce9}
.ag-hero-copy>p{color:#b4bfcb;font-size:clamp(14px,1.3vw,18px);line-height:1.65;max-width:470px;margin:0}
.ag-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:27px 0 21px}
.ag-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:49px;padding:13px 24px;border-radius:13px;border:1px solid rgba(199,222,244,.30);font:600 13px Inter,system-ui,sans-serif;transition:transform .2s cubic-bezier(.2,.8,.25,1),box-shadow .24s ease,border-color .24s ease,background .24s ease;position:relative;overflow:hidden;touch-action:manipulation}
.ag-btn span{font-size:17px;font-weight:400}
.ag-btn:before,.ag-google-btn:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.22),transparent 52%);opacity:.45;transition:opacity .25s}
.ag-btn:hover:before{opacity:.85}
.ag-btn:active,.ag-feature:active,.ag-tool:active{transform:scale(.975)!important}
.ag-btn:focus-visible,.ag-feature:focus-visible,.ag-tool:focus-visible,.ag-desktop-nav button:focus-visible{outline:2px solid #d9e6f6;outline-offset:3px}
.ag-btn-primary{color:#102033;background:linear-gradient(165deg,rgba(248,250,255,.97),rgba(203,220,238,.84));border-color:rgba(255,255,255,.83);box-shadow:inset 0 1px rgba(255,255,255,.8),0 7px 24px rgba(0,0,0,.23)}
.ag-btn-secondary{color:#edf5ff;background:linear-gradient(150deg,rgba(165,195,224,.16),rgba(73,111,143,.07));border-color:rgba(204,225,244,.4);box-shadow:inset 0 1px rgba(255,255,255,.17),0 5px 18px rgba(0,0,0,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ag-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,255,255,.28),0 9px 24px rgba(0,0,0,.27)}
.ag-trust-line{display:flex;gap:clamp(9px,2vw,24px);flex-wrap:wrap;color:#97a6b5;font-size:10.5px}
.ag-hero-visual{appearance:none;position:relative;display:block;border:1px solid rgba(220,232,243,.33);border-radius:18px;padding:0;overflow:hidden;background:#1b252f;aspect-ratio:1.92;width:100%;box-shadow:0 22px 46px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.16);cursor:pointer;transition:transform .5s cubic-bezier(.2,.9,.2,1),border-color .3s ease,box-shadow .4s ease}
.ag-hero-visual:hover{transform:translateY(-4px);border-color:rgba(230,241,250,.65);box-shadow:0 29px 50px rgba(0,0,0,.30)}
.ag-hero-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.ag-hero-visual:hover img{transform:scale(1.035)}
.ag-hero-image-cover{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,13,20,.18),transparent 44%);pointer-events:none}
.ag-image-corner{position:absolute;left:17px;top:17px;color:#eef5ff;background:rgba(21,34,45,.54);border:1px solid rgba(243,249,255,.3);padding:10px 14px;font-size:11px;border-radius:11px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ag-image-corner span{opacity:.6;margin:0 3px}
.ag-visual-cta{position:absolute;right:14px;bottom:14px;border-radius:99px;background:rgba(14,24,33,.70);border:1px solid rgba(239,249,255,.42);padding:10px 15px;font-size:11px;color:white;backdrop-filter:blur(12px)}
.ag-visual-cta span{margin-left:7px}
.glass-surface{background:linear-gradient(145deg,rgba(196,219,241,.105),rgba(50,76,101,.115));border:1px solid rgba(189,213,237,.21);box-shadow:inset 0 1px rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.11);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ag-primary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:42px}
.ag-feature{font:inherit;min-width:0;width:100%;display:flex;align-items:center;gap:16px;text-align:left;border-radius:15px;padding:14px;min-height:145px;cursor:pointer;color:#f6f8fc;transition:transform .27s cubic-bezier(.2,.8,.25,1),background .3s ease,border-color .3s ease}
.ag-feature:hover,.ag-tool:hover{transform:translateY(-3px);background:linear-gradient(145deg,rgba(196,220,243,.18),rgba(50,76,101,.15));border-color:rgba(213,232,251,.49)}
.ag-feature img{width:118px;height:112px;object-fit:cover;border-radius:10px;flex:0 0 118px;background:#39434c}
.ag-feature-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ag-feature-copy strong{font-size:19px;letter-spacing:-.025em}
.ag-feature-copy small{color:#b1becb;line-height:1.55;font-size:11px}
.ag-feature-copy em{font-style:normal;border:1px solid rgba(207,229,247,.2);background:rgba(255,255,255,.045);border-radius:30px;padding:5px 9px;color:#d6e0ea;width:max-content;max-width:100%;font-size:9px;margin-top:5px}
.ag-card-go{display:grid;place-items:center;flex:0 0 30px;height:30px;border:1px solid rgba(215,231,249,.30);border-radius:50%;color:#ecf4ff;font-size:15px;background:rgba(178,208,236,.08)}
.ag-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.ag-section-heading h3,.ag-studio h3{font:700 clamp(27px,3.1vw,42px)/1.15 'Space Grotesk',Inter,sans-serif;letter-spacing:-.045em;margin:9px 0 0}
.ag-text-link{white-space:nowrap;font-size:12px;color:#d8e4ef;text-decoration:none}.ag-text-link span{margin-left:7px}
.ag-tool-finder{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 17px}
.ag-tool-finder label{position:relative;width:min(100%,420px)}.ag-tool-finder label>span{position:absolute;left:15px;top:50%;translate:0 -52%;font-size:21px;color:#94a5b6}
.ag-tool-finder input{width:100%;padding:12px 16px 12px 44px;min-height:45px;color:#eff5fb;border-radius:12px;border:1px solid rgba(194,221,249,.25);background:rgba(183,210,240,.075);font:400 13px Inter,system-ui;outline:none}
.ag-tool-finder input:focus{border-color:rgba(215,233,249,.7);box-shadow:0 0 0 3px rgba(134,168,204,.14)}
.ag-tool-finder input::placeholder{color:#94a2b1}.ag-tool-finder>span{color:#a3b0bf;font-size:11px}
.ag-tool-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
.ag-tool{appearance:none;cursor:pointer;display:flex;min-width:0;min-height:146px;flex-direction:column;align-items:flex-start;text-align:left;justify-content:space-between;gap:6px;padding:18px;border-radius:13px;color:#ecf2fa;font:inherit;position:relative;transition:transform .26s cubic-bezier(.2,.8,.25,1),border-color .24s,background .24s}
.ag-tool-ico{font:500 25px/1.1 'Space Grotesk',Inter,sans-serif;color:#d7e6f5}
.ag-tool-text{display:flex;flex-direction:column;gap:4px;margin-top:auto}.ag-tool-text strong{font-size:13px}.ag-tool-text small{font-size:10px;color:#a6b5c6;line-height:1.4}
.ag-tool-arrow{position:absolute;top:15px;right:15px;font-size:13px;color:#93a9bb;opacity:.9}
.ag-tool.tool-search-hidden{display:none}.tool-search-empty{grid-column:1/-1;color:#b5c2d0;font-size:13px;padding:28px}
.ag-studio{display:flex;align-items:center;justify-content:space-between;gap:22px;border-top:1px solid rgba(179,215,247,.13);border-bottom:1px solid rgba(179,215,247,.13);margin-top:55px;padding:38px 0}
.ag-studio h3{font-size:33px}.ag-studio p{color:#aab7c7;font-size:12px;margin:10px 0 0}.ag-studio-categories{display:flex;gap:15px;align-items:center;flex-wrap:wrap;color:#bfccda;font-size:11px}.ag-studio-categories span:first-child{color:white;background:rgba(185,215,242,.15);padding:11px 15px;border-radius:40px;border:1px solid rgba(230,240,250,.27)}
.ag-ai-secondary{border-radius:18px;display:flex;align-items:center;gap:24px;margin-top:35px;padding:25px}.ag-ai-icon{width:60px;height:60px;flex:0 0 60px;border:1px solid rgba(210,232,248,.26);border-radius:16px;background:rgba(177,208,242,.085);display:grid;place-items:center;font-size:26px;color:#d7e5f5}.ag-ai-secondary>div{flex:1}.ag-ai-secondary h3{font-size:23px;letter-spacing:-.035em;margin:7px 0}.ag-ai-secondary p{font-size:12px;color:#aebbc8;margin:0}
/* Auth modal material + Google oauth */
.auth-modal{background:linear-gradient(160deg,rgba(38,52,67,.98),rgba(14,21,30,.98));border:1px solid rgba(193,215,239,.28);box-shadow:0 40px 100px rgba(0,0,0,.6);border-radius:22px}
.ag-oauth-wrap{margin:15px 0 5px}.ag-oauth-wrap[hidden]{display:none!important}
.ag-auth-divider{display:flex;align-items:center;gap:12px;color:#8d9cac;font-size:12px;margin:5px 0 15px}.ag-auth-divider:before,.ag-auth-divider:after{content:"";height:1px;background:rgba(192,213,239,.17);flex:1}
.ag-google-btn{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:50px;border:1px solid rgba(226,239,252,.32);border-radius:12px;color:#f8fbff;background:linear-gradient(155deg,rgba(173,198,225,.20),rgba(62,90,118,.10));font:600 13px Inter,system-ui,sans-serif;cursor:pointer;transition:transform .2s ease,border-color .2s,background .2s}
.ag-google-btn:hover{border-color:rgba(227,239,251,.75);background:rgba(150,180,210,.20);transform:translateY(-1px)}.ag-google-btn:disabled{cursor:wait;opacity:.6}
.ag-oauth-wrap p{font-size:11px;text-align:center;color:#9aabba;line-height:1.5;margin:13px 0 3px}
/* Motion: restrained fades and subtle parallax, not neon glow */
@keyframes ag-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ag-reveal{animation:ag-enter .74s cubic-bezier(.2,.75,.2,1) both}.ag-primary-grid{animation-delay:.10s}.ag-tools-section{animation-delay:.18s}
/* Existing tools: retain functional layouts, improve controls consistently */
body:not(.home-active) .main{padding-top:0}
body:not(.home-active) .topbar{margin:0 -42px 24px;padding:10px 32px;min-height:65px;position:sticky}
body:not(.home-active) .ag-desktop-nav{display:none}
body:not(.home-active) .ag-home-link{font-size:17px}
body:not(.home-active) .ag-home-link img{width:35px;height:35px}
body:not(.home-active) .panel,body:not(.home-active) .calc-card{border-color:rgba(189,213,237,.20);background:linear-gradient(155deg,rgba(191,214,236,.058),rgba(11,16,23,.30)),#10161d;border-radius:15px}
body:not(.home-active) .ghost,body:not(.home-active) .tool,body:not(.home-active) .primary{border-radius:11px;transition:transform .17s,background .2s,border-color .2s}
body:not(.home-active) .ghost:hover,body:not(.home-active) .tool:hover{background:rgba(162,191,218,.15);border-color:rgba(198,217,241,.55)}
body:not(.home-active) .ghost:active,body:not(.home-active) .tool:active{transform:scale(.98)}
.sidebar{background:#0c131b;border-right-color:rgba(190,220,248,.13)}.sidebar .brand-mark{border-color:rgba(205,224,241,.16);background:transparent}.sidebar .brand-mark img{max-width:100%;max-height:100%;object-fit:contain}.sidebar .nav-item.active{background:linear-gradient(145deg,rgba(200,221,244,.20),rgba(82,117,149,.13));color:#eef5ff;border-color:rgba(203,227,248,.29)}
@media(max-width:1380px){.ag-feature{gap:10px}.ag-feature img{width:83px;height:99px;flex-basis:83px}.ag-feature-copy strong{font-size:16px}.ag-tool-grid{grid-template-columns:repeat(4,1fr)}.ag-studio-categories{display:none}}
@media(max-width:1050px){.ag-desktop-nav{gap:13px}.ag-desktop-nav button{font-size:11px}.ag-hero{grid-template-columns:1fr 1.15fr;gap:23px}.ag-primary-grid{grid-template-columns:1fr}.ag-feature{min-height:118px}.ag-feature img{width:115px;height:88px;flex-basis:115px}.ag-feature-copy strong{font-size:18px}.ag-tool-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  body.home-active .sidebar{display:none}
  body.home-active .sidebar.mobile-nav-open{display:flex;position:sticky;top:59px;z-index:250;min-height:auto;width:100%;background:#101820}
  body.home-active .sidebar.mobile-nav-open nav{display:grid;max-height:64dvh;opacity:1;pointer-events:auto}
  .topbar,.home-active .topbar{min-height:58px;padding:7px 15px;gap:6px}
  .ag-home-link{font-size:17px;letter-spacing:-.045em;gap:4px}.ag-home-link img{width:35px;height:35px}
  .ag-desktop-nav{display:none}.topbar .top-actions{gap:6px!important}.topbar #auth-button{padding:8px 10px;min-height:37px;font-size:11px}.topbar .credit-chip{padding:7px 8px;min-height:37px}.topbar .credit-chip span{display:none}.topbar .credit-chip strong{font-size:11px}
  body.home-active .main{padding:0!important}.ag-shell{padding:22px 15px 78px}.ag-hero{display:flex;flex-direction:column;align-items:stretch;gap:22px;min-height:0;margin:0 0 24px}
  .ag-hero h2{font-size:clamp(47px,10vw,65px);margin:14px 0 14px}.ag-hero-copy>p{font-size:14px}.ag-eyebrow{font-size:9px}
  .ag-hero-actions{margin:22px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.ag-btn{padding:12px 10px;gap:9px;min-height:49px;font-size:11.5px}.ag-trust-line{gap:12px;font-size:9px}
  .ag-hero-visual{aspect-ratio:1.52;border-radius:15px}.ag-hero-visual img{object-position:center}.ag-image-corner{font-size:9px;padding:7px 10px;left:10px;top:10px}.ag-visual-cta{font-size:10px;padding:8px 10px}
  .ag-primary-grid{gap:9px;margin-bottom:40px}.ag-feature{min-height:110px;padding:11px;border-radius:13px;gap:13px}.ag-feature img{width:88px;height:86px;flex-basis:88px}.ag-feature-copy strong{font-size:16px}.ag-feature-copy small{font-size:10px}.ag-feature-copy em{font-size:8px;margin-top:0}.ag-card-go{flex-basis:27px;width:27px;height:27px}
  .ag-section-heading{align-items:flex-start;margin-bottom:15px}.ag-section-heading h3{font-size:27px}.ag-section-heading .ag-text-link{display:none}.ag-tool-finder{margin-bottom:12px}.ag-tool-finder label{width:100%}.ag-tool-finder>span{display:none}
  .ag-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ag-tool{min-height:142px;padding:14px}.ag-tool-ico{font-size:24px}.ag-tool-text strong{font-size:13px}.ag-tool-text small{font-size:10px}
  .ag-studio{margin-top:42px;padding:24px 0;flex-direction:column;align-items:stretch;gap:17px}.ag-studio h3{font-size:30px}.ag-studio-categories{display:flex;gap:7px}.ag-studio-categories span{font-size:9px}.ag-studio-categories span:first-child{padding:7px 10px}
  .ag-ai-secondary{margin-top:25px;flex-wrap:wrap;gap:15px;padding:18px}.ag-ai-secondary h3{font-size:20px}.ag-ai-icon{width:49px;height:49px;flex-basis:49px}.ag-ai-secondary>div{flex:1 1 calc(100% - 70px)}.ag-ai-secondary .ag-btn{width:100%}
  body:not(.home-active) .main{margin-left:0;padding:0 10px 80px}
  body:not(.home-active) .topbar{margin:0 -10px 15px;padding:7px 12px;position:sticky;top:0}
  body:not(.home-active) .ag-home-link{font-size:16px}
}
@media(max-width:380px){.ag-home-link{font-size:15px}.ag-home-link img{width:31px;height:31px}.ag-hero-actions{grid-template-columns:1fr}.ag-hero h2{font-size:43px}.ag-feature img{width:75px;height:82px;flex-basis:75px}.ag-card-go{display:none}}
@media(prefers-reduced-motion:reduce){.ag-reveal{animation:none!important}.ag-btn,.ag-hero-visual,.ag-feature,.ag-tool{transition:none!important}}
/* The original title/subtitle remain in DOM for tool logic but are replaced by branded header. */
.topbar>div:nth-child(3){display:none!important}
/* Override the legacy v2.8 absolute-position desktop anchoring without touching tool logic. */
@media(min-width:761px){
  body.home-active>.main{position:relative!important;top:auto!important;left:0!important;right:auto!important;width:100%!important;margin:0!important;padding:0!important;min-width:0!important}
  body:not(.home-active)>.main{left:276px!important;right:0!important;width:calc(100% - 276px)!important;padding:0 38px 60px!important}
}
@media(max-width:760px){
 .topbar,.home-active .topbar{flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
}
/* Refinement: the reference hero image already contains its own 'AI Render' label. */
.ag-image-corner{display:none}
/* Apple-like sandblasted glass primary actions; no neon edge glows. */
.ag-btn-primary{color:#f5f8fd;background:linear-gradient(155deg,rgba(204,226,245,.29),rgba(120,155,191,.20));border-color:rgba(238,246,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 18px rgba(0,0,0,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ag-btn-primary:hover{background:linear-gradient(145deg,rgba(218,236,253,.35),rgba(135,172,203,.23));border-color:rgba(245,251,255,.83)}


/* v4.1 refinement — warm charcoal, cleaner glass, no grid lines, better auth modal */
:root{
  --ag-bg:#101112;
  --ag-bg-soft:#17191c;
  --ag-panel-soft:rgba(255,255,255,.06);
  --ag-border-soft:rgba(255,255,255,.17);
  --ag-border-strong:rgba(255,255,255,.28);
  --ag-text-main:#f4f5f7;
  --ag-text-soft:#c7cacf;
}
body{
  background:
    radial-gradient(1100px 600px at -10% -15%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(255,255,255,.05), transparent 56%),
    radial-gradient(700px 360px at 50% 100%, rgba(255,255,255,.03), transparent 64%),
    linear-gradient(180deg, #111214 0%, #0f1113 56%, #101113 100%);
  color:var(--ag-text-main);
}
body:before{display:none!important}
.ag-shell:before{
  opacity:.55;
  background:
    radial-gradient(ellipse 45% 35% at 50% 18%, rgba(255,255,255,.06), transparent 72%),
    radial-gradient(ellipse 35% 22% at 72% 62%, rgba(255,255,255,.03), transparent 82%);
}
.topbar{
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(13,14,16,.76);
  backdrop-filter:blur(26px) saturate(125%);
  -webkit-backdrop-filter:blur(26px) saturate(125%);
}
.ag-home-link img{filter:drop-shadow(0 1px 1px rgba(255,255,255,.10))}
.ag-desktop-nav button,
.topbar .credit-chip span,
.ag-hero-copy>p,
.ag-feature-copy small,
.ag-tool-text small,
.ag-ai-secondary p,
.ag-studio p{color:#bcc1c8}
.ag-eyebrow,.ag-kicker,.ag-trust-line{color:#a9afb8}
.ag-eyebrow-dot{background:#f3f5f8;opacity:.75}
.ag-hero h2,.ag-section-heading h3,.ag-studio h3{color:#f5f6f8}
.ag-hero h2 span{color:#d8dbe0}
.ag-hero-visual,
.ag-feature,
.ag-tool,
.ag-ai-secondary,
.glass-surface{
  border-color:rgba(255,255,255,.14)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 14px 32px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
}
.ag-hero-visual:hover,
.ag-feature:hover,
.ag-tool:hover,
.ag-ai-secondary:hover{
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 38px rgba(0,0,0,.24)!important;
}
.ag-btn,
.topbar #auth-button,
.topbar .credit-chip,
.ag-google-btn,
.auth-tab,
#auth-submit,
#auth-logout,
.modal-close,
.upgrade-top,
.upgrade-mini,
.credit-pack,
.paywall-plan-card button,
.billing-option{
  --mx:50%;
  --my:0%;
  position:relative;
  overflow:hidden;
}
.ag-btn::after,
.topbar #auth-button::after,
.topbar .credit-chip::after,
.ag-google-btn::after,
.auth-tab::after,
#auth-submit::after,
#auth-logout::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(180px 90px at var(--mx) var(--my), rgba(255,255,255,.28), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 55%);
  opacity:.55;
  transition:opacity .25s ease;
}
.ag-btn:hover::after,
.topbar #auth-button:hover::after,
.topbar .credit-chip:hover::after,
.ag-google-btn:hover::after,
.auth-tab:hover::after,
#auth-submit:hover::after,
#auth-logout:hover::after{opacity:.9}
.topbar #auth-button,
.topbar .credit-chip,
.ag-btn,
.ag-google-btn,
.auth-tab,
#auth-submit,
#auth-logout{
  border:1px solid rgba(255,255,255,.19)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
  color:#f7f8fa!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
}
.topbar #auth-button:hover,
.topbar .credit-chip:hover,
.ag-btn:hover,
.ag-google-btn:hover,
.auth-tab:hover,
#auth-submit:hover,
#auth-logout:hover{
  border-color:rgba(255,255,255,.30)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
}
.ag-btn-primary,
.ag-btn-secondary{
  min-height:52px;
  letter-spacing:-.01em;
}
.ag-btn-primary{color:#f8f9fb!important}
.ag-btn-secondary{color:#eceff3!important}
.ag-feature-copy em,
.ag-card-go,
.ag-studio-categories span:first-child,
.ag-image-corner,
.ag-visual-cta{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05))!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#f0f3f6!important;
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}
.ag-tool-finder input{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.14);
  color:#f2f4f7;
}
.ag-tool-finder input::placeholder{color:#aeb3ba}
.ag-studio{border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
/* Better auth modal */
.auth-backdrop{
  background:rgba(7,8,10,.60)!important;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.auth-backdrop:not([hidden]){animation:ag-fade-in .28s ease both}
.auth-modal{
  width:min(470px,calc(100% - 24px));
  padding:28px 28px 24px!important;
  color:#eef2f6!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    linear-gradient(180deg, rgba(30,32,36,.78), rgba(18,19,22,.90)) !important;
  border-radius:28px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 36px 80px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(30px) saturate(135%);
  -webkit-backdrop-filter:blur(30px) saturate(135%);
  animation:ag-modal-in .42s cubic-bezier(.2,.85,.22,1) both;
}
.auth-modal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 20%, transparent 75%, rgba(255,255,255,.03));
}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-right:28px}
.auth-mark{
  width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.15);
}
.auth-mark img{width:36px;height:36px;object-fit:contain}
.auth-brand strong{display:block;font-size:20px;letter-spacing:-.03em;color:#fbfcfe}
.auth-brand small{display:block;color:#b9c0c8;font-size:12px;margin-top:3px}
.auth-tabs{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.12)!important;
  padding:5px!important;
  border-radius:16px!important;
  margin-bottom:18px!important;
}
.auth-tab{color:#c9ced4!important;border-radius:12px!important;font-size:13px;font-weight:700;min-height:44px}
.auth-tab.active{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08))!important;
  color:#fbfcfe!important;
  box-shadow:inset 0 1px rgba(255,255,255,.20),0 6px 18px rgba(0,0,0,.10);
}
.auth-form{gap:13px!important}
.auth-form label{font-size:12px!important;font-weight:600!important;color:#dfe3e8!important;letter-spacing:.01em}
.auth-form input{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.06)!important;
  color:#f7f8fa!important;
  min-height:50px;
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.auth-form input::placeholder{color:#9fa6af}
.auth-form input:focus{
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06)!important;
}
#auth-submit{min-height:50px;border-radius:15px!important;font-weight:700!important;margin-top:2px}
.ag-auth-divider{color:#9fa6ae!important}
.ag-auth-divider:before,.ag-auth-divider:after{background:rgba(255,255,255,.12)!important}
.ag-google-btn{min-height:50px;border-radius:15px!important;font-weight:650!important}
.auth-link{
  display:inline-flex;align-items:center;justify-content:center;margin-top:10px;
  color:#cfd5dc!important;background:none;border:0;cursor:pointer;font-size:12px;text-decoration:underline;text-underline-offset:4px;
}
.auth-message{
  margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#eef3f7;
}
.auth-account{
  margin-top:14px;padding:16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
}
.auth-user-row{align-items:center}
.auth-avatar{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  color:#fff;border:1px solid rgba(255,255,255,.16);
}
.auth-privacy{margin-top:14px;color:#aab0b7!important;font-size:11px!important;line-height:1.55}
.auth-privacy a{color:#edf2f6}
.modal-close{
  right:14px!important;top:14px!important;
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.10);
  color:#eff3f6!important;background:rgba(255,255,255,.05)!important;
}
.modal-close:hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important}
/* Animation polish */
@keyframes ag-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ag-modal-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.ag-hero-copy > *,
.ag-hero-visual,
.ag-primary-grid,
.ag-tools-section,
.ag-studio,
.ag-ai-secondary{animation:ag-enter .72s cubic-bezier(.2,.75,.2,1) both}
.ag-hero-copy .ag-eyebrow{animation-delay:.02s}
.ag-hero-copy h2{animation-delay:.06s}
.ag-hero-copy p{animation-delay:.12s}
.ag-hero-actions{animation-delay:.18s}
.ag-trust-line{animation-delay:.24s}
.ag-hero-visual{animation-delay:.18s}
.ag-primary-grid{animation-delay:.24s}
.ag-tools-section{animation-delay:.32s}
.ag-studio{animation-delay:.38s}
.ag-ai-secondary{animation-delay:.45s}
@media(max-width:760px){
  .auth-modal{padding:24px 18px 18px!important;border-radius:24px!important;width:min(100%,calc(100% - 14px))}
  .auth-brand strong{font-size:18px}
  .auth-mark{width:46px;height:46px;border-radius:16px}
  .ag-hero-visual{aspect-ratio:1.42}
}

.auth-brand-note{margin-top:6px;color:#b7bdc5;font-size:11px;line-height:1.5;max-width:290px}


/* v4.2 — homepage closer to approved warm visual concept */
.ag-shell-warm{max-width:1420px;padding:26px 26px 50px}
#tab-home{background:
  radial-gradient(1200px 650px at 15% 0%, rgba(249,220,192,.12), transparent 60%),
  radial-gradient(900px 500px at 100% 0%, rgba(255,196,130,.08), transparent 55%),
  linear-gradient(180deg,#1a1614 0%,#171515 38%,#131416 100%)}
.ag-showcase-hero{
  position:relative;overflow:hidden;min-height:700px;border-radius:34px;padding:86px 34px 44px;border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, rgba(20,18,17,.78) 0%, rgba(20,18,17,.54) 28%, rgba(20,18,17,.18) 56%, rgba(20,18,17,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url("assets/archonthego-building-only.webp") center/cover no-repeat;
  box-shadow:0 28px 70px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.12);
}
.ag-showcase-overlay{position:absolute;inset:0;background:radial-gradient(80% 65% at 0% 10%, rgba(255,255,255,.06), transparent 58%),linear-gradient(90deg, rgba(18,15,14,.28) 0%, rgba(18,15,14,.18) 34%, rgba(18,15,14,.02) 68%, rgba(18,15,14,.02) 100%);pointer-events:none}
.ag-showcase-copy{position:relative;z-index:2;max-width:520px}
.ag-showcase-copy .ag-eyebrow{color:#efe3d8;opacity:.96;letter-spacing:.26em;font-size:12px;margin-bottom:18px}
.ag-showcase-copy h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(56px,7vw,92px);line-height:.94;letter-spacing:-.05em;color:#f6f0eb;margin:0 0 18px}
.ag-showcase-copy h2 span{color:#f6f0eb}
.ag-showcase-copy p{font-size:clamp(19px,1.8vw,31px);line-height:1.38;color:#efe6df;max-width:510px;margin:0 0 28px}
.ag-trust-line-warm{margin-top:22px;gap:30px;flex-wrap:wrap;color:#ede3db;font-size:16px}
.ag-btn-home-primary,.ag-btn-home-secondary{min-height:58px;padding:0 24px;border-radius:18px;font-size:18px;gap:14px;font-weight:650;letter-spacing:-.02em;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ag-btn-home-primary{color:#1b1715!important;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,233,228,.84))!important;border:1px solid rgba(255,255,255,.52)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 28px rgba(0,0,0,.18)!important}
.ag-btn-home-secondary{color:#fff6ef!important;background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07))!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.16)!important}
.ag-showcase-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.ag-showcase-card{min-height:166px;padding:18px;border-radius:26px;text-align:left;display:grid;grid-template-columns:118px 1fr auto;gap:18px;align-items:center;color:#f7f0e8;background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06))!important}
.ag-showcase-card img{width:118px;height:118px;object-fit:cover;border-radius:22px;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.ag-showcase-card-copy{display:grid;gap:8px}
.ag-showcase-card-copy strong{font-size:20px;line-height:1.1;color:#fbf7f2}
.ag-showcase-card-copy small{font-size:15px;line-height:1.45;color:#e8ddd2}
.ag-showcase-card-copy em{justify-self:start;font-style:normal;font-size:13px;color:#fff4ec;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15)}
.ag-showcase-card .ag-card-go{justify-self:end;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:18px}
.ag-mobile-stage{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:26px;align-items:end;margin-top:34px}
.ag-mobile-stage-copy{padding:12px 6px 18px 2px}
.ag-mobile-stage-copy h3{font-family:"Space Grotesk";font-size:42px;line-height:1.04;letter-spacing:-.04em;color:#f3eee9;margin:10px 0 12px}
.ag-mobile-stage-copy p{font-size:17px;line-height:1.65;color:#d8ccc0;max-width:370px}
.ag-mobile-stage-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.ag-mobile-stage-pills span{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f0e7df;font-size:13px}
.ag-mobile-stage-visuals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:end}
.ag-phone-preview{padding:18px 18px 0;border-radius:34px;overflow:hidden;display:flex;justify-content:center;min-height:470px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),linear-gradient(180deg, rgba(42,34,29,.55), rgba(23,22,25,.62))!important}
.ag-phone-preview img{width:min(100%,290px);height:auto;display:block;filter:drop-shadow(0 18px 32px rgba(0,0,0,.42))}
#tab-home .ag-tools-section{margin-top:40px}
#tab-home .ag-section-heading h3{font-size:58px;line-height:1.02;letter-spacing:-.05em;color:#f3ece6}
#tab-home .ag-text-link,#tab-home .ag-kicker,#tab-home .ag-tool-text small,#tab-home .ag-tool-finder span,#tab-home .ag-tool-finder input::placeholder{color:#d7ccc0}
#tab-home .ag-tool-finder label{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;backdrop-filter:blur(18px)}
#tab-home .ag-tool-finder input{background:transparent;border:0}
#tab-home .ag-tool-grid{gap:16px}
#tab-home .ag-tool{border-radius:24px;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04))!important}
#tab-home .ag-tool-ico{background:rgba(255,255,255,.12);color:#f4ede5;border:1px solid rgba(255,255,255,.12)}
#tab-home .ag-tool-text strong{color:#faf6f2;font-size:20px}
#tab-home .ag-tool-text small{font-size:14px;color:#dfd2c6}
#tab-home .ag-tool-arrow{color:#f4e9df}
.ag-studio-warm,.ag-ai-secondary-warm{margin-top:38px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),linear-gradient(180deg, rgba(40,32,28,.65), rgba(17,18,20,.64))!important;border-radius:28px!important;border:1px solid rgba(255,255,255,.12)!important}
.ag-studio-warm{padding:28px 26px}.ag-studio-warm h3,.ag-ai-secondary-warm h3{color:#f3ece7}.ag-studio-warm p,.ag-ai-secondary-warm p{color:#ddd0c4}
.ag-studio-warm .ag-studio-categories span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#f0e4d9}
@media(max-width:1180px){
  .ag-showcase-hero{padding-bottom:210px;min-height:820px}
  .ag-showcase-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
  .ag-mobile-stage{grid-template-columns:1fr;align-items:start}
}
@media(max-width:820px){
  .ag-shell-warm{padding:14px 14px 36px}
  .ag-showcase-hero{min-height:auto;padding:76px 18px 18px;border-radius:28px;background-position:center right}
  .ag-showcase-copy{max-width:100%}
  .ag-showcase-copy h2{font-size:52px}
  .ag-showcase-copy p{font-size:18px;max-width:370px}
  .ag-btn-home-primary,.ag-btn-home-secondary{width:100%;font-size:17px;min-height:56px;padding:0 20px}
  .ag-hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .ag-trust-line-warm{gap:14px;font-size:13px}
  .ag-showcase-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
  .ag-showcase-card{grid-template-columns:92px 1fr auto;gap:14px;min-height:auto;padding:14px;border-radius:22px}
  .ag-showcase-card img{width:92px;height:92px;border-radius:18px}
  .ag-showcase-card-copy strong{font-size:18px}.ag-showcase-card-copy small{font-size:13px}.ag-showcase-card-copy em{font-size:11px;padding:7px 11px}
  .ag-mobile-stage-copy h3{font-size:34px}.ag-mobile-stage-copy p{font-size:15px}
  .ag-mobile-stage-visuals{grid-template-columns:1fr 1fr;gap:12px}
  .ag-phone-preview{padding:12px 12px 0;border-radius:24px;min-height:unset}
  #tab-home .ag-section-heading h3{font-size:38px}
}