@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap');
:root{
  --bg:#F5F5F4;--bg2:#F5F5F4;--bg3:#E7E5E4;
  --card:#FFFDFB;--card-hover:#FFFDFB;
  --text:#0C0A09;--text2:#292524;--text3:#44403C;
  --accent:#FF6B00;--accent2:#FF8C38;--accent-bg:rgba(255,107,0,.08);
  --accent-glow:rgba(255,107,0,.15);
  --accent-magenta:#E11D6B;
  --border:rgba(28,25,23,0.08);--border2:rgba(28,25,23,0.15);
  --navy:#ffffff;--success:#22C55E;--danger:#EF4444;
  --shadow:0 8px 30px rgba(28,25,23,0.04);
  --shadow-lg:0 20px 50px rgba(28,25,23,0.07), 0 0 0 1px rgba(28,25,23,0.03);
  --radius:12px;--radius-sm:8px;--radius-lg:20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{max-width:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{width:100%;max-width:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;overflow-x:clip}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(255,107,0,.42);outline-offset:3px}

/* WHATSAPP FLOATING BUTTON */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:10002;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.35);transition:all .3s ease;text-decoration:none;cursor:pointer}
.whatsapp-float:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 8px 32px rgba(37,211,102,.45)}
.whatsapp-float:active{transform:scale(.95)}
.whatsapp-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.4);animation:wp-pulse 2s ease-out infinite;pointer-events:none}
@keyframes wp-pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.5);opacity:0}}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;line-height:1.15;color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

.consent-stack{display:flex;flex-direction:column;gap:10px;margin:18px 0 20px}
.consent-check{display:flex;align-items:flex-start;gap:10px;color:var(--text2);font-size:.78rem;line-height:1.45;cursor:pointer}
.consent-check input[type="checkbox"]{width:18px;height:18px;min-width:18px;flex:0 0 18px;accent-color:var(--accent);margin-top:2px;padding:0;border:0;box-shadow:none}
.consent-check a{color:var(--accent);font-weight:700;text-decoration:none}
.consent-check a:hover{text-decoration:underline}
.consent-required{color:#ef4444}
.form-consent-group{margin-top:8px}
.form-group label.consent-check{display:flex!important;align-items:flex-start;gap:10px;margin-bottom:0!important;font-weight:500!important;line-height:1.5;cursor:pointer}
.form-group label.consent-check input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important;margin-top:2px!important;padding:0!important}
.checkout-consents{margin-top:-6px}
.cookie-consent{position:fixed;left:50%;bottom:24px;z-index:10050;width:min(calc(100% - 48px),1120px);transform:translateX(-50%);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 18px;border:1px solid rgba(255,107,0,.2);border-radius:20px;background:rgba(255,253,251,.96);color:var(--text);box-shadow:0 20px 50px rgba(28,25,23,.18),0 0 0 1px rgba(255,255,255,.5) inset;backdrop-filter:blur(18px)}
.cookie-consent[hidden]{display:none}
.cookie-consent::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent-magenta))}
.cookie-consent-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:'Outfit',sans-serif;font-size:1.45rem;font-weight:800;box-shadow:0 6px 16px rgba(255,107,0,.24)}
.cookie-consent-copy{min-width:0}
.cookie-consent strong{display:block;font-family:'Outfit',sans-serif;font-size:1rem;margin-bottom:3px;color:var(--text)}
.cookie-consent p{color:var(--text2);font-size:.82rem;line-height:1.45;margin:0}
.cookie-consent-links{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:5px;color:var(--text3);font-size:.74rem;line-height:1.3}
.cookie-consent a{color:var(--accent);font-weight:800;text-decoration:none}
.cookie-consent a:hover{text-decoration:underline}
.cookie-consent-links span{color:var(--border2)}
.cookie-consent-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cookie-consent button{border-radius:10px;font-family:inherit;font-size:.78rem;font-weight:800;padding:11px 15px;cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.cookie-consent button:hover{transform:translateY(-1px)}
.cookie-consent-actions button:first-child{border:1px solid var(--border2);background:transparent;color:var(--text2)}
.cookie-consent-actions button:first-child:hover{background:rgba(28,25,23,.04)}
.cookie-consent-actions button:last-child{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 5px 16px rgba(255,107,0,.22)}
.cookie-consent-actions button:last-child span{font-size:1rem;margin-left:3px}
.legal-page{min-height:100vh;padding:56px 24px 80px;background:radial-gradient(circle at 88% 0,rgba(255,107,0,.12),transparent 30%),var(--bg)}
.legal-page>.logo{display:inline-flex;margin:0 0 32px;text-decoration:none}
.legal-card{max-width:980px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:38px;box-shadow:var(--shadow-lg)}
.legal-topbar{width:min(1080px,100%);display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 auto 28px}
.legal-topbar .logo{display:inline-flex;margin:0;text-decoration:none}
.legal-home-link{display:inline-flex;align-items:center;gap:8px;color:var(--text2);font-size:.86rem;font-weight:800;text-decoration:none;transition:color .2s ease,transform .2s ease}
.legal-home-link span{color:var(--accent);font-size:1.15rem}
.legal-home-link:hover{color:var(--accent);transform:translateX(2px)}
.cookie-policy-page{padding-top:32px;background:radial-gradient(circle at 12% 0,rgba(255,107,0,.1),transparent 28%),radial-gradient(circle at 92% 18%,rgba(255,140,56,.12),transparent 24%),var(--bg)}
.cookie-policy-card{position:relative;width:min(1080px,100%);margin:0 auto;padding:52px;border-radius:28px;overflow:hidden}
.cookie-policy-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent-magenta))}
.cookie-policy-card .legal-eyebrow{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid rgba(255,107,0,.28);border-radius:999px;background:rgba(255,107,0,.08);margin-bottom:14px}
.cookie-policy-card h1{letter-spacing:-.035em}
.cookie-policy-card .legal-updated{display:inline-block;padding:7px 11px;border-radius:8px;background:rgba(28,25,23,.04)}
.cookie-policy-card .legal-toc{background:linear-gradient(135deg,rgba(255,107,0,.06),rgba(255,255,255,.5));border-color:rgba(255,107,0,.16)}
.cookie-policy-card .legal-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:4px}
.cookie-policy-card h2{border-left:4px solid var(--accent);padding-left:12px;margin-top:40px}
.cookie-policy-card .legal-table-wrap{border-color:rgba(255,107,0,.2);box-shadow:0 8px 24px rgba(28,25,23,.04)}
.legal-eyebrow{color:var(--accent);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.legal-card h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:18px}
.legal-card h2{font-size:1.25rem;margin:28px 0 10px}
.legal-card p{color:var(--text2);margin:0 0 14px}
.legal-updated{font-size:.86rem;color:var(--text3)!important;font-weight:700;margin-top:-8px!important}
.legal-note{background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.22);border-radius:14px;padding:14px 16px;color:var(--text)!important}
.legal-card ul{margin:0 0 18px 20px;color:var(--text2);line-height:1.7}
.legal-card li{margin:8px 0}
.legal-card strong{color:var(--text)}
.legal-card code{font-family:'Inter',sans-serif;background:rgba(28,25,23,.05);border:1px solid var(--border);border-radius:6px;padding:2px 6px;color:var(--text)}
.legal-card a{color:var(--accent);font-weight:800;text-decoration:none}
.legal-card a:hover{text-decoration:underline}
.legal-table-wrap{overflow-x:auto;margin:18px 0 22px;border:1px solid rgba(255,107,0,.14);border-radius:14px;background:#fff}
.legal-table{width:100%;border-collapse:collapse;min-width:720px}
.legal-table th,.legal-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2);font-size:.88rem;line-height:1.55}
.legal-table th{color:rgba(255,140,56,.92);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,107,0,.06)}
.legal-table tr:last-child td{border-bottom:0}
.legal-toc{background:rgba(28,25,23,.03);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:22px 0 28px}
.legal-toc-title{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:0 0 12px}
.legal-toc ol{margin:0 0 0 20px;padding:0;color:var(--text2);line-height:1.75}
.legal-toc li{margin:4px 0}
.legal-toc a{color:var(--accent);font-weight:700;text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.legal-modal-overlay{position:fixed;inset:0;z-index:100010;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,12,10,.72);backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.legal-modal-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.legal-modal-dialog{width:min(980px,100%);max-height:min(88vh,920px);background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;outline:none}
.legal-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border);background:rgba(255,107,0,.04)}
.legal-modal-title{margin:0;font-size:1.15rem;line-height:1.3;color:var(--text)}
.legal-modal-close{flex-shrink:0;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text2);font-size:1.6rem;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.legal-modal-close:hover{background:rgba(255,107,0,.08);border-color:rgba(255,107,0,.28);color:var(--text)}
.legal-modal-body{overflow-y:auto;padding:24px 28px 28px}
.legal-modal-body .legal-eyebrow{margin-top:0}
.legal-modal-body .legal-card h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.legal-modal-body .legal-card h2{font-size:1.12rem;margin-top:22px}
.legal-modal-body .legal-table{min-width:640px}
.legal-modal-footer{display:flex;justify-content:flex-end;padding:12px 22px 16px;border-top:1px solid var(--border);background:rgba(28,25,23,.02)}
.legal-modal-fullpage{color:var(--accent);font-size:.84rem;font-weight:800;text-decoration:none}
.legal-modal-fullpage:hover{text-decoration:underline}
.legal-modal-loading,.legal-modal-error{color:var(--text2);margin:0;padding:24px 0;text-align:center}
html.legal-modal-open,body.legal-modal-open{overflow:hidden}
@media (max-width:640px){.legal-modal-overlay{padding:12px}.legal-modal-dialog{max-height:92vh;border-radius:16px}.legal-modal-body{padding:18px 16px 22px}}
.why-restoup{padding:96px 0;background:linear-gradient(180deg,var(--bg),var(--bg2))}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-card{border:1px solid var(--border);background:var(--card);border-radius:16px;padding:22px;min-height:220px}
.why-card span{display:inline-flex;margin-bottom:14px;color:var(--accent);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.why-card h3{font-size:1.05rem;margin-bottom:12px}
.why-card p{color:var(--text2);font-size:.9rem}
.proof-method-note{max-width:760px;margin:20px auto 0;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.72);color:var(--text2);font-size:.86rem;line-height:1.65;text-align:center}
.proof-method-note strong{color:var(--text)}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;z-index:10000;padding:14px 0;background:rgba(245,245,244,.55);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);border-bottom:1px solid transparent;transition:.3s}
.header.scrolled{border-bottom-color:var(--border);background:rgba(245,245,244,.78)}
.header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;color:var(--text);text-decoration:none}
.logo-image-link{display:inline-flex;align-items:center;flex-shrink:0}
.logo-image{display:block;width:56px;height:56px;object-fit:contain;border-radius:12px}
.logo span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:32px}
.nav a{color:var(--text2);text-decoration:none;font-size:.9rem;font-weight:500;transition:.2s}
.nav a:hover{color:var(--text)}
.header-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-feature-settings:"liga" 0,"calt" 0;padding:10px 24px;border-radius:var(--radius-sm);border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600;font-size:.9rem;font-family:'Inter',sans-serif;transition:.2s;box-shadow:0 2px 8px var(--accent-glow)}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;transition:.3s;border-radius:2px}
.mobile-menu{display:none;visibility:hidden}

/* BRAND SVG ICONS */
.icon-inline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  stroke: currentColor;
}
.icon-brand {
  width: 32px;
  height: 32px;
  stroke: var(--accent);
  color: transparent;
  filter: drop-shadow(0 4px 10px var(--accent-glow));
}
.icon-mockup {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  stroke: var(--text3);
}
.pm-select-val .icon-mockup, .pm-file-chip .icon-mockup {
  stroke: var(--text2) !important;
}
.icon-badge {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;position:relative;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 30% 50%,rgba(255,107,0,.14) 0%,transparent 65%),radial-gradient(ellipse at 80% 20%,rgba(99,102,241,.09) 0%,transparent 55%),radial-gradient(ellipse at 70% 80%,rgba(225,29,107,.07) 0%,transparent 45%)}
.hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(var(--border) .5px,transparent .5px),linear-gradient(90deg,var(--border) .5px,transparent .5px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,black 20%,transparent 65%);opacity:.4}
/* Floating orbs */
.float-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;filter:blur(60px);opacity:.7}
.float-orb-1{width:350px;height:350px;background:rgba(255,107,0,.12);top:5%;right:0;animation:float-slow 8s ease-in-out infinite}
.float-orb-2{width:280px;height:280px;background:rgba(99,102,241,.1);bottom:10%;left:5%;animation:float-slow 10s ease-in-out infinite reverse}
.float-orb-3{width:300px;height:300px;background:rgba(225,29,107,.07);top:45%;left:35%;animation:float-slow 12s ease-in-out infinite}
.float-orb-4{width:200px;height:200px;background:rgba(34,197,94,.06);top:20%;left:20%;animation:float-slow 14s ease-in-out infinite}
@keyframes float-slow{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-40px) scale(1.08)}50%{transform:translate(-20px,30px) scale(.92)}75%{transform:translate(35px,15px) scale(1.05)}}
/* Animated shapes */
.shape{position:absolute;pointer-events:none;z-index:1;opacity:.12}
.shape-ring{width:120px;height:120px;border:2px solid var(--accent);border-radius:50%;top:15%;right:20%;animation:spin-slow 20s linear infinite}
.shape-cross{width:20px;height:20px;top:70%;right:15%;animation:float-slow 6s ease-in-out infinite}
.shape-cross::before,.shape-cross::after{content:'';position:absolute;background:var(--accent);border-radius:2px}
.shape-cross::before{width:20px;height:3px;top:8px;left:0}
.shape-cross::after{width:3px;height:20px;top:0;left:8px}
.shape-dots{top:30%;left:8%;display:grid;grid-template-columns:repeat(3,6px);gap:8px}
.shape-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Particles */
.particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0;animation:particle-float linear infinite}
.particle:nth-child(1){background:var(--accent);left:10%;animation-duration:12s;animation-delay:0s}
.particle:nth-child(2){background:#6366F1;left:25%;width:3px;height:3px;animation-duration:16s;animation-delay:2s}
.particle:nth-child(3){background:#E11D6B;left:40%;animation-duration:14s;animation-delay:4s}
.particle:nth-child(4){background:var(--accent);left:55%;width:5px;height:5px;animation-duration:18s;animation-delay:1s}
.particle:nth-child(5){background:#22C55E;left:70%;width:3px;height:3px;animation-duration:13s;animation-delay:3s}
.particle:nth-child(6){background:#7B2D8E;left:85%;animation-duration:15s;animation-delay:5s}
.particle:nth-child(7){background:#F5A623;left:15%;width:3px;height:3px;animation-duration:17s;animation-delay:6s}
.particle:nth-child(8){background:var(--accent);left:60%;animation-duration:11s;animation-delay:7s}
@keyframes particle-float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(-100px) scale(1);opacity:0}}
/* Animated Background Arrows */
.bg-arrows{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.bg-arrow{position:absolute;color:var(--accent);opacity:0;animation:arrow-float 15s linear infinite}
.bg-arrow svg{width:100%;height:100%}
.bg-arrow:nth-child(1){left:2%;width:40px;animation-duration:14s;animation-delay:2s}
.bg-arrow:nth-child(2){left:5%;width:48px;animation-duration:17s;animation-delay:6s}
.bg-arrow:nth-child(3){left:8%;width:32px;animation-duration:11s;animation-delay:1s}
.bg-arrow:nth-child(4){left:12%;width:56px;animation-duration:19s;animation-delay:8s}
.bg-arrow:nth-child(5){left:88%;width:36px;animation-duration:15s;animation-delay:4s}
.bg-arrow:nth-child(6){left:92%;width:44px;animation-duration:16s;animation-delay:9s}
.bg-arrow:nth-child(7){left:95%;width:52px;animation-duration:13s;animation-delay:3s}
.bg-arrow:nth-child(8){left:98%;width:38px;animation-duration:18s;animation-delay:11s}
.bg-arrow:nth-child(9){display:none}
.bg-arrow:nth-child(10){display:none}
@keyframes arrow-float{0%{transform:translateY(100vh) scale(.8);opacity:0}10%{opacity:.25}90%{opacity:.25}100%{transform:translateY(-100px) scale(1.2);opacity:0}}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:center}
.hero-content{max-width:620px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:100px;background:rgba(255,107,0,.12);border:1.5px solid rgba(255,107,0,.35);font-size:.85rem;color:var(--accent);font-weight:700;margin-bottom:24px}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-size:4.2rem;font-weight:800;margin-bottom:20px;letter-spacing:-.02em;color:var(--text);line-height:1.1}
.gradient{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.35rem;color:var(--text2);font-weight:500;margin-bottom:36px;max-width:520px;line-height:1.6}
.hero-ctas{display:flex;gap:16px;margin-bottom:48px;flex-wrap:wrap}
.hero-ctas a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn-primary{padding:14px 32px;border-radius:var(--radius-sm);border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:1rem;font-family:'Inter',sans-serif;font-feature-settings:"liga" 0,"calt" 0;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 12px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-glow)}
.btn-ghost{padding:14px 32px;border-radius:var(--radius-sm);cursor:pointer;background:rgba(255,107,0,0.03);border:2px solid var(--accent);color:var(--accent);font-weight:600;font-size:1rem;font-family:'Inter',sans-serif;transition:.2s}
.btn-ghost:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(255,107,0,0.08)}
.hero-stats{display:flex;gap:32px}
.hero-stat{text-align:left}
.hero-stat .number{font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:700;color:var(--accent)}
.hero-stat .label{font-size:.9rem;color:var(--text3);font-weight:600;margin-top:2px}

/* Dashboard Mockup — Light Theme */
.hero-visual{position:relative;width:100%}
.dashboard-mockup{background:#fff;border-radius:var(--radius-lg);padding:24px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.08),0 0 0 1px var(--border);color:var(--text);overflow:hidden;width:100%;height:540px;display:flex;flex-direction:column}
.dash-brand-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.dash-brand-name{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:700;color:var(--text);transition:opacity .4s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-brand-tag{font-size:.65rem;padding:3px 10px;border-radius:100px;font-weight:600;transition:opacity .4s;white-space:nowrap}
.dash-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.metric-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;transition:all .5s;display:flex;flex-direction:column;justify-content:center}
.metric-card:hover{background:var(--bg3);border-color:var(--border2)}
.metric-label{font-size:.75rem;color:var(--text3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.metric-value{font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:700;color:var(--text);transition:all .5s;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-value.up{color:var(--success)}
.dash-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;flex:1}
.dash-chart{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.chart-area{display:flex;gap:0;flex:1;min-height:100px}
.chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;padding-right:6px;width:34px;flex-shrink:0}
.chart-y-label{font-size:.55rem;color:var(--text3);text-align:right;line-height:1;font-variant-numeric:tabular-nums}
.chart-bars-wrap{flex:1;position:relative}
.chart-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:100%;align-items:end}
.chart-bar{border-radius:3px 3px 0 0;transition:height .8s ease, background .5s ease}
.chart-bar[style*="var(--bg3)"]{background:#cbd5e1 !important}
.chart-timeline{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:10px;position:relative;border-top:1px dashed var(--border2);padding-top:8px}
.tl-pre{grid-column: 1 / span var(--pre-months, 4); font-size:.55rem;color:var(--text3);text-transform:uppercase;font-weight:600;text-align:center;position:relative;transition:all .5s ease}
.tl-post{grid-column: span calc(12 - var(--pre-months, 4)); font-size:.55rem;color:var(--accent);text-transform:uppercase;font-weight:700;text-align:center;transition:all .5s ease}
.dash-platforms{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column}
.dash-platforms .dash-plat-title{font-size:.75rem;color:var(--text3);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.plat-item{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);flex:1}
.plat-item:last-child{border-bottom:none}
.plat-name{font-size:.8rem;color:var(--text2);display:flex;align-items:center;justify-content:center;width:80px;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.plat-growth{font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:700;color:var(--success);transition:all .5s;width:44px;text-align:left;display:inline-block}
.plat-bar-wrap{width:45px;height:4px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-left:6px}
.plat-bar{height:100%;border-radius:4px;transition:width 1s ease}
@keyframes dash-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.dashboard-mockup{transition:box-shadow .6s ease}
.dashboard-mockup.dash-transitioning{box-shadow:0 25px 80px rgba(0,0,0,.05),0 0 0 1px var(--border)}
.dashboard-mockup .metric-value,.dashboard-mockup .plat-growth,.dashboard-mockup .dash-brand-name,.dashboard-mockup .dash-brand-tag{transition:opacity .35s ease,transform .35s ease}
.dashboard-mockup.dash-out .metric-value,.dashboard-mockup.dash-out .plat-growth,.dashboard-mockup.dash-out .dash-brand-name,.dashboard-mockup.dash-out .dash-brand-tag{opacity:0;transform:translateY(-4px)}
.dashboard-mockup.dash-in .metric-value,.dashboard-mockup.dash-in .plat-growth,.dashboard-mockup.dash-in .dash-brand-name,.dashboard-mockup.dash-in .dash-brand-tag{animation:dash-slide-up .45s ease forwards}

/* PLATFORMS */
.platforms{padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:2}
.platforms-label{text-align:center;font-size:.85rem;color:var(--text3);margin-bottom:32px}
.platforms-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap}
.platform-logo{font-size:1.1rem;font-weight:700;opacity:.85;transition:.3s;padding:12px 20px;border-radius:var(--radius-sm)}
.platform-logo:hover{opacity:1;background:var(--bg2);transform:translateY(-2px)}

/* PROBLEM */
.problem{padding:120px 0;background:var(--bg);position:relative;overflow:hidden}
.problem::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(239,68,68,.04) 0%,transparent 70%);pointer-events:none}
.problem::after{content:'';position:absolute;bottom:-80px;left:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,107,0,.04) 0%,transparent 70%);pointer-events:none}
.section-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:16px}
.section-title{font-size:2.5rem;font-weight:700;margin-bottom:20px;max-width:600px;letter-spacing:-.01em}
.section-sub{font-size:1.05rem;color:var(--text2);max-width:520px;margin-bottom:56px}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.problem-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;transition:.3s;position:relative;overflow:hidden}
.problem-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--danger),transparent);opacity:0;transition:.3s}
.problem-card:hover{border-color:#FECACA;transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.problem-card:hover::before{opacity:1}
.problem-icon{font-size:2rem;margin-bottom:16px}
.problem-card h3{font-size:1.1rem;font-weight:600;margin-bottom:8px;font-family:'Inter',sans-serif}
.problem-card p{font-size:.9rem;color:var(--text2);line-height:1.6}

/* SOLUTION */
.solution{padding:120px 0;background:var(--bg2);position:relative;overflow:hidden}
.solution::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(255,107,0,.04) 0%,transparent 60%);pointer-events:none}
.solution .section-title,.solution .section-label,.solution .section-sub{text-align:center}
.solution .section-title{margin:0 auto 20px}
.solution .section-sub{margin:0 auto 72px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.steps::before{content:'';position:absolute;top:54px;left:16.5%;right:16.5%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.25}
.step{text-align:center;padding:0 24px;position:relative}
.step-number{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.2rem;color:#fff;margin-bottom:24px;position:relative;z-index:2;box-shadow:0 4px 12px var(--accent-glow)}
.step h3{font-size:1.2rem;font-weight:700;margin-bottom:12px}
.step p{font-size:.95rem;color:var(--text);font-weight:550;line-height:1.6}

/* PROOF */
.proof{padding:120px 0;background:var(--bg);scroll-margin-top:104px}
.proof .section-title,.proof .section-label,.proof .section-sub{text-align:center}
.proof .section-title{margin:0 auto 20px}
.proof .section-sub{margin:0 auto 56px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.proof-card:hover{border-color:rgba(255,107,0,.3);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.proof-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.proof-restaurant{font-weight:600;font-size:1rem}
.proof-city{font-size:.8rem;color:var(--text3);margin-top:2px}
.proof-platform{font-size:.7rem;padding:4px 10px;border-radius:100px;background:var(--accent-bg);color:var(--accent);font-weight:600;white-space:nowrap}
.proof-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proof-metric .label{font-size:.75rem;color:var(--text3);margin-bottom:4px}
.proof-metric .value{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700;color:var(--success)}
.proof .proof-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;background:linear-gradient(180deg,#ffffff,var(--bg2)) !important;border:1px solid rgba(255,107,0,.18) !important;border-radius:var(--radius);color:var(--text2);font-size:.95rem;margin-top:48px;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(28,25,23,.07) !important}
.proof .proof-banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.proof .proof-banner strong{color:var(--text)}
.proof .proof-banner-copy{display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;z-index:1}
.proof .proof-banner-copy small{color:var(--text3);font-size:.8rem;line-height:1.45}
.proof .proof-banner-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;padding:11px 16px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;font-size:.88rem;font-weight:800;box-shadow:0 8px 20px rgba(255,107,0,.14);transition:.2s;position:relative;z-index:1}
.proof-banner-link:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(255,107,0,.2)}
.proof-quote{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.proof-quote p{font-size:.85rem;color:var(--text2);font-style:italic;line-height:1.6;margin-bottom:6px}
.proof-author{font-size:.78rem;color:var(--text3);font-weight:500}
/* Proof Slider */
.proof-slider-container{position:relative;overflow:hidden;padding:10px 0;max-width:1200px;margin:0 auto}
.proof-slider-track{display:flex;transition:transform .6s cubic-bezier(.25,1,.5,1);gap:24px}
.proof-card{flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:.3s}
.proof-card:hover{border-color:rgba(255,107,0,.3);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.proof-slider-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:32px}
.proof-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center}
.proof-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.proof-dots{display:flex;gap:8px}
.proof-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);cursor:pointer;transition:.3s}
.proof-dot.active{background:var(--accent);width:24px;border-radius:4px}
.proof-platform[data-plat="Yemeksepeti"]{color:#E11D6B;background:rgba(225,29,107,0.1)}
.proof-platform[data-plat="Trendyol Go"]{color:#F27A1A;background:rgba(242,122,26,0.1)}
.proof-platform[data-plat="Getir Yemek"]{color:#7B2D8E;background:rgba(123,45,142,0.1)}
.proof-platform[data-plat="Migros Yemek"]{color:#F5A623;background:rgba(245,166,35,0.1)}

/* TESTIMONIALS */
.testimonials{padding:120px 0;background:var(--bg2)}
.testimonials .section-label{text-align:center}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;transition:.3s}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.testimonial-stars{color:var(--accent);font-size:1.1rem;margin-bottom:16px;letter-spacing:2px}
.testimonial-text{font-size:.92rem;color:var(--text2);line-height:1.7;margin-bottom:24px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.testimonial-name{font-size:.88rem;font-weight:600;color:var(--text)}
.testimonial-role{font-size:.78rem;color:var(--text3)}

@media(max-width:768px){
  .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .header,
  .hero,
  main,
  section,
  footer {
    max-width: 100%;
  }

  .proof-banner{flex-direction:column;text-align:center;align-items:stretch;padding:20px}
  .proof-banner-link{width:100%;max-width:280px;margin:0 auto}
}

/* HERO → COCKPIT BRIDGE */
.hero-cockpit-bridge{position:relative;z-index:3;margin:-34px auto 0;padding:0 0 28px;pointer-events:none}
.hero-cockpit-bridge__track{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);align-items:center;gap:0;min-height:116px;padding:18px 24px;border:1px solid rgba(255,255,255,.72);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,248,239,.62));box-shadow:0 18px 45px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
.hero-cockpit-bridge__track::after{content:"";position:absolute;left:50%;bottom:-22px;width:1px;height:20px;background:linear-gradient(to bottom,rgba(255,107,0,.62),rgba(255,107,0,0));transform:translateX(-50%)}
.hero-cockpit-bridge__track::before{content:"";position:absolute;left:50%;bottom:-24px;width:7px;height:7px;border-right:1px solid rgba(255,107,0,.68);border-bottom:1px solid rgba(255,107,0,.68);transform:translateX(-50%) rotate(45deg)}
.hero-cockpit-bridge__step{display:flex;align-items:center;gap:13px;min-width:0;padding:12px 14px;border-radius:16px;transition-delay:0ms}
.hero-cockpit-bridge__step:nth-child(3){transition-delay:180ms}
.hero-cockpit-bridge__step:nth-child(5){transition-delay:360ms}
.hero-cockpit-bridge__number{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(255,107,0,.22);border-radius:11px;background:rgba(255,247,232,.88);color:#ff6b00;font-size:.68rem;font-weight:900;letter-spacing:.04em}
.hero-cockpit-bridge__step h3{margin:0 0 4px;color:#111827;font-size:.91rem;line-height:1.15;font-weight:850}
.hero-cockpit-bridge__step p{margin:0;color:#64748b;font-size:.72rem;line-height:1.45}
.hero-cockpit-bridge__connector{position:relative;height:1px;background:linear-gradient(90deg,rgba(255,107,0,.14),rgba(255,107,0,.68),rgba(255,107,0,.14));opacity:.82}
.hero-cockpit-bridge__connector::after{content:"";position:absolute;top:50%;left:0;width:6px;height:6px;border-radius:50%;background:#ff8a1f;box-shadow:0 0 0 4px rgba(255,138,31,.12),0 0 12px rgba(255,138,31,.55);transform:translate(-50%,-50%);animation:hero-bridge-light 1.25s ease-out 1 both}
.hero-cockpit-bridge__connector:nth-child(4)::after{animation-delay:180ms}
@keyframes hero-bridge-light{0%{left:0;opacity:0}12%{opacity:1}100%{left:100%;opacity:.35}}
@media(max-width:720px){
  .hero-cockpit-bridge{margin:-20px auto 0;padding:0 16px 26px}
  .hero-cockpit-bridge__track{grid-template-columns:1fr;gap:0;min-height:0;padding:14px 16px;border-radius:20px}
  .hero-cockpit-bridge__track::after{left:34px;bottom:-19px;height:18px;transform:none}
  .hero-cockpit-bridge__track::before{left:31px;bottom:-22px;transform:rotate(45deg)}
  .hero-cockpit-bridge__step{padding:10px 0;gap:11px}
  .hero-cockpit-bridge__connector{width:1px;height:22px;margin-left:16px;background:linear-gradient(to bottom,rgba(255,107,0,.14),rgba(255,107,0,.68),rgba(255,107,0,.14))}
  .hero-cockpit-bridge__connector::after{top:0;left:50%;transform:translate(-50%,-50%);animation-name:hero-bridge-light-vertical}
  .hero-cockpit-bridge__connector:nth-child(4)::after{animation-delay:180ms}
  .hero-cockpit-bridge__step h3{font-size:.84rem}
  .hero-cockpit-bridge__step p{font-size:.7rem}
}
@keyframes hero-bridge-light-vertical{0%{top:0;opacity:0}12%{opacity:1}100%{top:100%;opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .hero-cockpit-bridge__connector::after{animation:none;opacity:.35}
  .hero-cockpit-bridge__step{transition-delay:0ms!important}
}

/* PRICING */
.pricing{padding:120px 0;background:var(--bg2)}
.pricing .section-title,.pricing .section-label,.pricing .section-sub{text-align:center}
.pricing .section-title{margin:0 auto 20px}
.pricing .section-sub{margin:0 auto 48px}
.pricing-toggle{display:flex;justify-content:center;gap:12px;align-items:center;margin-bottom:56px}
.pricing-toggle span{font-size:.9rem;color:var(--text3);font-weight:500}
.pricing-toggle span.active{color:var(--text)}
.toggle-switch{width:48px;height:26px;background:var(--bg3);border:1px solid var(--border);border-radius:100px;position:relative;cursor:pointer;transition:.3s}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--accent);transition:.3s}
.toggle-switch.yearly::after{transform:translateX(22px)}
.toggle-switch.yearly{border-color:var(--accent);background:var(--accent-bg)}
.save-badge{font-size:.75rem;background:rgba(22,163,74,.1);color:var(--success);padding:4px 10px;border-radius:100px;font-weight:600}
.save-badge.neon{background:var(--success);color:#fff;box-shadow:0 0 16px rgba(22,163,74,0.6);border:1px solid rgba(22,163,74,0.8)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);position:relative;display:flex;flex-direction:column;overflow:hidden}
.pricing-card:hover{box-shadow:0 20px 50px rgba(0,0,0,0.1)}
.pricing-card::after{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--x, 0) var(--y, 0), rgba(255,255,255,0.06), transparent 40%);pointer-events:none}

.pricing-card.start-tier:hover{border-color:var(--accent);box-shadow:0 15px 40px rgba(255,107,0,0.15)}
.pricing-card.growth-tier{border-color:rgba(34,197,94,0.4);background:var(--card)}
.pricing-card.growth-tier:hover{border-color:var(--success);box-shadow:var(--shadow-lg)}
.pricing-card.pro-tier{background:var(--card);border-color:rgba(255,215,0,0.4)}
.pricing-card.pro-tier:hover{border-color:#FFD700;box-shadow:var(--shadow-lg)}

.pricing-card.featured{border-color:var(--success);transform:scale(1.08) !important;z-index:2}
.pricing-card.featured.reveal{transform:translateY(30px) scale(1.08) !important}
.pricing-card.featured.reveal.visible{transform:translateY(0) scale(1.08) !important}
.pricing-card.featured:hover{transform:scale(1.08) !important;box-shadow:0 15px 40px rgba(34,197,94,0.2)}
.pricing-card.featured .recommended{position:absolute;top:12px;right:12px;background:var(--success);color:#fff;font-size:.65rem;font-weight:800;padding:4px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:1px}

.pricing-card.disabled{opacity:0.7;filter:grayscale(0.8);cursor:not-allowed}
.pricing-card.disabled:hover{transform:none !important;box-shadow:none !important;border-color:var(--border) !important}
.pricing-card.disabled .btn-primary{background:var(--text3);box-shadow:none;pointer-events:none}
.coming-soon-tag{background:var(--bg3);color:var(--text3);font-size:0.7rem;font-weight:800;padding:4px 12px;border-radius:100px;margin-bottom:12px;display:inline-block;border:1px solid var(--border)}

.pricing-card h3{font-size:1.6rem;font-weight:800;margin-bottom:12px;letter-spacing:-0.02em}
.pricing-card .desc{font-size:.9rem;color:var(--text2);margin-bottom:28px;line-height:1.6}
.features-list{list-style:none;margin-bottom:36px;flex:1}
.features-list li{padding:10px 0;font-size:.88rem;color:var(--text2);display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(0,0,0,0.04)}
.features-list li:last-child{border-bottom:none}
.features-list .check{color:var(--success);font-weight:800;font-size:1.1rem}
.pricing-card .btn-primary{width:100%;justify-content:center;padding:16px;font-size:1rem}
.pricing-guarantee{text-align:center;margin-top:48px;font-size:.9rem;color:var(--text3)}
.pricing-guarantee span{color:var(--text2);font-weight:500}

/* SEO Topic Hub */
.seo-hub{padding:110px 0;background:var(--bg)}
.seo-hub-header{text-align:center;display:flex;flex-direction:column;align-items:center}
.seo-hub-header .section-title{max-width:760px;margin:0 auto 16px}
.seo-hub-header .section-sub{max-width:680px;margin:0 auto 48px}
.seo-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.seo-topic-card{display:flex;flex-direction:column;min-height:230px;padding:28px;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.seo-topic-card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:var(--shadow-lg)}
.seo-topic-card span{width:max-content;margin-bottom:18px;padding:6px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.seo-topic-card h3{font-size:1.18rem;line-height:1.35;color:var(--text);margin-bottom:12px;letter-spacing:-.01em}
.seo-topic-card p{color:var(--text2);font-size:.92rem;line-height:1.65}

/* SEO Article Pages */
.seo-page-hero{padding:140px 0 72px;background:var(--bg);border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:24px;color:var(--text3);font-size:.86rem}
.breadcrumb a{color:var(--text2);text-decoration:none;font-weight:700}
.breadcrumb a:hover{color:var(--accent)}
.seo-page-hero h1{max-width:880px;font-size:3.15rem;line-height:1.05;letter-spacing:-.03em;margin-bottom:20px}
.seo-page-hero p{max-width:760px;color:var(--text2);font-size:1.12rem;line-height:1.75}
.seo-page-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.seo-page-meta span{padding:8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--border);font-size:.82rem;font-weight:800;color:var(--text2)}
.seo-page{padding:76px 0 96px;background:var(--bg)}
.seo-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.seo-article{max-width:800px}
.seo-article h2{font-size:2rem;line-height:1.2;letter-spacing:-.02em;margin:42px 0 16px;color:var(--text)}
.seo-article h2:first-child{margin-top:0}
.seo-article h3{font-size:1.28rem;margin:28px 0 10px;color:var(--text)}
.seo-article p{font-size:1.02rem;line-height:1.85;color:var(--text2);margin-bottom:18px}
.seo-article ul,.seo-article ol{padding-left:22px;margin:0 0 24px;color:var(--text2);line-height:1.8}
.seo-article li{margin-bottom:10px}
.seo-callout{padding:22px 24px;border-radius:18px;background:#111827;color:#fff;margin:28px 0}
.seo-callout strong{display:block;font-size:1.05rem;margin-bottom:8px}
.seo-callout p{color:rgba(255,255,255,.78);margin:0}
.seo-ai-answer{padding:24px;border-radius:18px;background:#fff7ed;border:1px solid rgba(255,107,0,.18);margin:0 0 28px}
.seo-ai-answer span{display:inline-flex;margin-bottom:10px;color:var(--accent);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.seo-ai-answer p{margin:0;color:var(--text);font-size:1.04rem;line-height:1.8}
.seo-fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.seo-fact{padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.seo-fact strong{display:block;color:var(--text);font-size:1rem;margin-bottom:6px}
.seo-fact span{display:block;color:var(--text2);font-size:.9rem;line-height:1.55}
.seo-cta-panel{padding:28px;border-radius:20px;background:linear-gradient(135deg,#111827,#1f2937);color:#fff;margin:34px 0}
.seo-cta-panel h2{color:#fff!important;margin:0 0 10px!important}
.seo-cta-panel p{color:rgba(255,255,255,.78);margin-bottom:18px}
.seo-cta-panel .btn-primary{display:inline-flex;text-decoration:none}
.seo-faq{margin-top:34px}
.seo-faq details{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:16px 18px;margin-bottom:12px}
.seo-faq summary{cursor:pointer;font-weight:900;color:var(--text)}
.seo-faq p{margin:12px 0 0;font-size:.96rem}
.seo-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.seo-related-grid a{display:block;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--border);text-decoration:none;color:var(--text);font-weight:800}
.seo-related-grid a:hover{color:var(--accent);border-color:rgba(255,107,0,.25)}
.seo-table{width:100%;border-collapse:collapse;margin:24px 0;border:1px solid rgba(226,232,240,.95);border-radius:16px;overflow:hidden;display:table}
.seo-table th,.seo-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(226,232,240,.85);vertical-align:top;color:var(--text2);font-size:.94rem}
.seo-table th{background:#f8fafc;color:var(--text);font-weight:800}
.seo-table tr:last-child td{border-bottom:0}
.seo-sidebar{position:sticky;top:92px;display:flex;flex-direction:column;gap:18px}
.seo-side-card{padding:22px;border-radius:18px;background:#f8fafc;border:1px solid rgba(226,232,240,.95)}
.seo-side-card h3{font-size:1.05rem;margin-bottom:12px}
.seo-side-card a:not(.btn-primary){display:block;color:var(--text2);text-decoration:none;font-weight:700;font-size:.9rem;padding:8px 0;border-bottom:1px solid rgba(226,232,240,.8)}
.seo-side-card a:not(.btn-primary):last-child{border-bottom:0}
.seo-side-card a:not(.btn-primary):hover{color:var(--accent)}
.seo-side-card .btn-primary{display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-top:12px;width:100%;padding:14px 20px;border:0;border-bottom:none;text-align:center;text-decoration:none;font-size:.95rem;font-weight:700;line-height:1.2}

/* FAQ */
.faq{padding:120px 0;background:var(--bg)}
.faq .section-title{text-align:center;margin:0 auto 56px}
.faq .section-label{text-align:center}
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{width:100%;padding:20px 0;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;color:var(--text);font-family:'Inter',sans-serif;text-align:left}
.faq-question:hover{color:var(--accent)}
.faq-icon{font-size:1.2rem;transition:.3s;color:var(--text3)}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--accent)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer p{padding:0 0 20px;font-size:.9rem;color:var(--text2);line-height:1.7}

/* FINAL CTA */
.final-cta{padding:120px 0;text-align:center;background:var(--bg);position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(255,107,0,.08) 0%,transparent 70%);pointer-events:none}
.final-cta .container{position:relative;z-index:2}
.final-cta h2{font-size:3rem;font-weight:800;margin-bottom:16px}
.final-cta p{font-size:1.1rem;color:var(--text2);margin-bottom:40px}
.final-cta .btn-primary{font-size:1.1rem;padding:18px 48px}
.trust-badges{display:flex;justify-content:center;gap:32px;margin-top:32px}
.trust-badge{font-size:.8rem;color:var(--text3);display:flex;align-items:center;gap:6px}

/* EliteUp Disabled */
.pricing-card.disabled{opacity:.55;pointer-events:none;filter:grayscale(.3)}
.pricing-card.disabled .btn-primary{background:#94A3B8;box-shadow:none;cursor:not-allowed}
.coming-soon-badge{display:inline-block;background:var(--bg3);color:var(--text3);font-size:.75rem;font-weight:600;padding:4px 14px;border-radius:100px;margin-bottom:8px;border:1px solid var(--border)}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--radius-lg);padding:40px;max-width:520px;width:100%;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.15);margin:40px auto;flex-shrink:0}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text3);transition:.2s;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--bg2);color:var(--text)}
.modal h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.modal .modal-sub{font-size:.9rem;color:var(--text2);margin-bottom:28px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;font-family:'Inter',sans-serif;color:var(--text);background:var(--bg2);transition:.2s;outline:none}
.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-group input::placeholder{color:var(--text3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-divider{border:none;border-top:1px solid var(--border);margin:24px 0}
.form-divider-label{font-size:.8rem;font-weight:600;color:var(--text2);margin-bottom:16px}

/* FORM MULTI-STEP */
.form-step{display:none}
.form-step.active{display:block;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;font-family:'Inter',sans-serif;color:var(--text);background:var(--bg2);transition:.2s;outline:none}
.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-group textarea{resize:vertical}
.form-platform-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.form-platform-options label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);font-size:.78rem;font-weight:600;cursor:pointer}
.form-platform-options input{width:16px!important;height:16px!important;min-width:16px!important;padding:0!important}
@media (max-width:560px){.form-platform-options{grid-template-columns:1fr}}
.form-actions{display:flex;gap:12px;margin-top:24px}
.landing-form-error{margin-top:16px;padding:12px 14px;border:1px solid #fdba74;border-radius:var(--radius-sm);background:#fff7ed;color:#9a3412;font-size:.85rem;line-height:1.45;font-weight:600}
.landing-form-error[hidden]{display:none}
.form-group.form-field-invalid input,.form-group.form-field-invalid select,.form-group.form-field-invalid textarea{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.16)!important}
.form-consent-group.form-field-invalid .consent-check{border:1px solid #dc2626;border-radius:var(--radius-sm);padding:10px;color:#b91c1c}
.form-field-invalid{accent-color:#dc2626}
.form-field-shake{animation:formFieldShake .38s ease-in-out}
@keyframes formFieldShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.form-actions .btn-primary{flex:2;margin-top:0}
.form-actions .btn-ghost{flex:1;padding:16px;border-radius:var(--radius-sm);font-size:1rem;border:1px solid var(--border);background:transparent;cursor:pointer;transition:.2s;color:var(--text2);font-weight:600;display:flex;align-items:center;justify-content:center}
.form-actions .btn-ghost:hover{background:var(--bg2);color:var(--text)}
.modal .btn-primary{width:100%;justify-content:center;padding:16px;font-size:1rem;margin-top:8px}
.modal-progress{display:flex;justify-content:space-between;margin-bottom:32px;position:relative;max-width:300px;margin-left:auto;margin-right:auto}
.modal-progress::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:var(--border);z-index:1;transform:translateY(-50%)}
.progress-step{width:32px;height:32px;border-radius:50%;background:var(--bg2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--text3);position:relative;z-index:2;transition:.3s}
.progress-step.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 10px var(--accent-glow)}
.progress-step.completed{background:var(--success);border-color:var(--success);color:#fff}
.footer{position:relative;z-index:10002;padding:42px 0 28px;border-top:1px solid var(--border);background:var(--navy);color:#CBD5E1}
.footer .logo{color:#F8FAFC}
.footer-grid{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(150px,1fr));gap:28px;margin-bottom:30px}
.footer-brand p{color:#64748B;font-size:.85rem;margin-top:12px;max-width:280px;line-height:1.6}
.footer h4{font-size:.8rem;font-weight:700;margin-bottom:10px;color:#94A3B8}
.footer a{display:block;color:#64748B;text-decoration:none;font-size:.85rem;padding:4px 0;transition:.2s}
.footer a:hover{color:#F8FAFC}
/* ponytail: mobile footer toggle */
.footer-toggle{display:none;background:rgba(255,255,255,.92);border:0;color:#0F172A;font-size:.82rem;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;transition:all .2s}
.footer-toggle:hover{background:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px}
.footer-bottom p{font-size:.8rem;color:#64748B}
.footer-bottom .footer-legal-notice{line-height:1.55}
.footer-bottom .legal-links{display:flex;align-items:center;justify-content:flex-end;gap:6px 14px;flex-wrap:nowrap}
.footer-bottom .legal-links a{display:inline-flex;align-items:center;color:#64748B;text-decoration:none;font-size:.8rem;font-weight:700;line-height:1.35;padding:4px 0}
.footer-bottom .legal-links a:hover{color:#F8FAFC}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* MOBILE STICKY CTA */
/* PANEL SHOWCASE */
.panel-showcase{padding:120px 0;background:var(--bg);position:relative;overflow:hidden}
.panel-showcase-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.panel-showcase .container{position:relative;z-index:2}
.panel-showcase-header{text-align:center;display:flex;flex-direction:column;align-items:center}
.panel-benefit-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 48px;
}
.panel-benefit-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
  color: #111827;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}
.panel-benefit-badges span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.panel-showcase-layout{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.panel-showcase-layout.is-demo-locked {
  user-select: none;
}
.panel-showcase-layout.is-demo-locked .panel-features-col,
.panel-showcase-layout.is-demo-locked .panel-mockup {
  pointer-events: none;
}
.panel-showcase-layout.is-demo-locked .panel-feature-card {
  cursor: default;
}
.panel-features-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:120px}
.panel-feature-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;transition:all .35s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.panel-feature-card:hover{border-color:var(--border2);background:var(--card-hover)}
.panel-feature-card.active{border-color:rgba(255,107,0,.4);background:linear-gradient(135deg,rgba(255,107,0,.03),rgba(255,140,56,.02));box-shadow:0 8px 32px rgba(255,107,0,.08)}
.panel-feature-card .panel-feature-icon{font-size:1.5rem;margin-bottom:2px}
.panel-feature-card h4{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--text);margin:0}
.panel-feature-card p{font-size:.86rem;color:var(--text);font-weight:550;line-height:1.5;margin:0}
.panel-feature-progress{height:3px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:8px}
.panel-feature-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;width:0%;transition:width .1s linear}
.panel-feature-card.active .panel-feature-bar{animation:panel-progress 5s linear forwards}
@keyframes panel-progress{from{width:0%}to{width:100%}}

/* Panel Mockup — Premium macOS Browser Cockpit Frame */
.panel-mockup-wrapper {
  position: relative;
}
.panel-mockup {
  background: #080a0f;
  border-radius: 24px;
  position: relative;
  box-shadow: 0 30px 100px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Browser window header */
.pm-browser-header {
  display: none !important;
}
.pm-window-controls {
  display: flex;
  gap: 7px;
}
.pm-control-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.pm-control-dot.red { background: #FF5F56; }
.pm-control-dot.yellow { background: #FFBD2E; }
.pm-control-dot.green { background: #27C93F; }

.pm-address-bar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 260px;
  justify-content: center;
  font-family: monospace;
}
.pm-browser-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pm-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: pulse-dot 2s infinite;
}
.pm-online-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Cockpit main workspace flex */
.pm-dashboard-body {
  display: flex;
  min-height: 450px;
  flex-grow: 1;
}

/* Sidebar navigation drawer */
.pm-sidebar {
  width: 175px;
  background: #0d1017;
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.pm-sidebar-title {
  font-size: 0.62rem;
  font-weight: 800;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  padding-left: 10px;
  text-transform: uppercase;
}
.pm-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  cursor: default;
  transition: all 0.2s ease;
}
.pm-sidebar-item.active {
  background: rgba(255,107,0,0.1);
  color: var(--accent);
}
.icon-sidebar {
  width: 14px;
  height: 14px;
  opacity: 0.75;
}
.pm-sidebar-badge {
  background: rgba(255,107,0,0.15);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 100px;
  margin-left: auto;
}
.pm-sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.pm-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,107,0,0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
}
.pm-user-info {
  display: flex;
  flex-direction: column;
}
.pm-user-info strong {
  font-size: 0.7rem;
  color: #f1f5f9;
  font-weight: 600;
}
.pm-user-info span {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.4);
}

/* Dynamic content viewport */
.pm-viewport {
  flex-grow: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  background: #090b10;
}
.panel-mock-screen {
  display: none;
  flex-direction: column;
  animation: pm-fadeIn .4s ease-out;
  height: 100%;
}
.panel-mock-screen.active {
  display: flex;
}
@keyframes pm-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pm-viewport-header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 12px;
  margin-bottom: 8px;
}
.pm-viewport-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0;
}
.pm-viewport-header p {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.4);
  margin: 4px 0 0;
}

/* Step 0 Switcher Tabs */
.pm-request-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 4px;
  border-radius: 8px;
}
.pm-switcher-tab {
  flex: 1;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: default;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.pm-switcher-tab.active {
  background: rgba(255,107,0,0.12);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(255,107,0,0.08);
}

/* Real High-Fidelity Mockup Previews inside Step 0 */

/* 1. Görsel (Instagram-style Mock) */
.pm-real-mockup-graphic {
  background: #0f121d;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.ig-story-frame {
  background: linear-gradient(135deg, #180d07 0%, #070709 100%);
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: 8px;
  padding: 12px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ig-story-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,107,0,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.ig-story-header {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.ig-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding: 1px;
}
.ig-username {
  font-size: 0.62rem;
  color: #fff;
  font-weight: 700;
}
.ig-time {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.4);
}
.ig-story-content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ig-badge {
  align-self: flex-start;
  font-size: 0.52rem;
  font-weight: 800;
  color: #fff;
  background: rgba(255,107,0,0.25);
  border: 1px solid rgba(255,107,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.ig-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ig-story-content .ig-promo-badge {
  font-size: 1.25rem;
  font-weight: 950;
  color: #ff6b00;
  text-shadow: 0 0 15px rgba(255,107,0,0.3);
}
.ig-swipe-action {
  text-align: center;
  font-size: 0.52rem;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 6px;
  z-index: 2;
  margin-top: 8px;
}

/* 2. Menü Düzenleme (Spreadsheet/Integration Mock) */
.pm-real-mockup-table {
  background: #0d1017;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.sync-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: #22c55e;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sync-pulse {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}
.sync-table-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  font-size: 0.68rem;
}
.sync-item {
  color: #f1f5f9;
  font-weight: 600;
  flex-grow: 1;
}
.sync-old {
  color: rgba(239, 68, 68, 0.5);
  text-decoration: line-through;
  margin-right: 10px;
}
.sync-new {
  color: #22c55e;
  font-weight: 800;
  margin-right: 12px;
}
.sync-badge {
  font-size: 0.52rem;
  font-weight: 900;
  padding: 2px 4px;
  border-radius: 4px;
  color: #fff;
}
.sync-badge.yemeksepeti { background: #ea004b; }
.sync-badge.trendyol { background: #f27a1a; }
.sync-badge.getir { background: #5d3ebc; }

/* 3. Bölge Düzenleme (Map Polygon/SaaS Zone Mock) */
.pm-real-mockup-map {
  background: #0f1118;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.map-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.map-hud-title {
  font-size: 0.6rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.map-hud-status {
  font-size: 0.52rem;
  font-weight: 900;
  color: #22c55e;
  background: rgba(34,197,94,0.15);
  padding: 1px 5px;
  border-radius: 4px;
}
.map-container {
  height: 125px;
  background-color: #0b0c10;
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 15px 15px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.map-polygon-area {
  position: absolute;
  top: 15%; left: 15%;
  width: 70%; height: 70%;
  background: rgba(255,107,0,0.08);
  border: 1.5px dashed rgba(255,107,0,0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-inner-poly {
  width: 70%; height: 70%;
  background: rgba(255,107,0,0.1);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255,107,0,0.15);
}
.map-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px #22c55e;
}
.map-marker::after {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border: 2px solid rgba(34,197,94,0.4);
  border-radius: 50%;
  animation: pulse-ring 1.5s infinite ease-out;
}
.map-marker.m1 { top: 30%; left: 40%; }
.map-marker.m2 { top: 65%; left: 58%; }
.map-hud-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.85);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.7);
  padding: 6px 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.map-hud-bottom b {
  color: var(--accent);
}

/* Step 0 split layout design */
.pm-step0-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 24px;
  align-items: center;
}
.pm-request-form-simple {
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
.pm-request-badge {
  align-self: flex-start;
  font-family: monospace;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(255,107,0,0.1);
  border: 1px solid rgba(255,107,0,0.25);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.pm-request-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}
.pm-request-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  font-weight: 400;
}
.pm-preview-direct {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-direct-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}
.pm-direct-status span:first-child {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-field label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.35);
}
.pm-select-val {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  min-height: 105px;
  display: flex;
  flex-wrap: wrap;
}
.pm-typing {
  color: rgba(255,255,255,0.7);
}
.pm-cursor {
  color: var(--accent);
  animation: pm-blink 1s step-end infinite;
}
@keyframes pm-blink { 50% { opacity: 0; } }

/* Assets Proof Gallery (Step 0 right column) */
.pm-assets-gallery {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-gallery-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
}
.pm-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pm-gallery-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-card-thumb {
  height: 70px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #11141e;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.pm-card-thumb.orange-glow { border-top: 2px solid var(--accent); }
.pm-card-thumb.purple-glow { border-top: 2px solid #6366F1; }

.pm-card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pm-card-info span:first-child {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.pm-card-approved {
  font-size: 0.55rem;
  font-weight: 800;
  color: #22c55e !important;
  background: rgba(34,197,94,0.15) !important;
  border: 1px solid rgba(34,197,94,0.25) !important;
  padding: 3px 6px !important;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* Step 1: Kanban Task list style */
.pm-task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-task-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.25s ease;
}
.pm-task-card.pm-task-active {
  border-color: rgba(255,107,0,0.22);
  background: rgba(255,107,0,0.02);
}
.pm-task-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}
.pm-task-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f1f5f9;
}
.pm-task-date {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
}
.pm-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pm-badge-progress { background: rgba(255,107,0,0.12); color: var(--accent); }
.pm-badge-review { background: rgba(99,102,241,0.12); color: #818CF8; }
.pm-badge-new { background: rgba(34,197,94,0.12); color: #4ADE80; }

.pm-task-meta {
  display: flex;
  gap: 16px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
}
.pm-task-meta b {
  color: rgba(255,255,255,0.65);
}
.pm-sla-ok { color: #4ADE80 !important; }
.pm-sla-warn { color: #FBBF24 !important; }

.pm-task-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.pm-task-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Step 2: Results Display with active download cards */
.pm-results-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pm-result-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pm-result-stat {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
.pm-result-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #f1f5f9;
}
.pm-result-num.pm-green { color: #22C55E; }
.pm-result-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.pm-delivered-archive {
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-archive-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pm-files-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-file-chip {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.pm-file-chip:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}

/* MOBILE STICKY CTA */
.mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:10001;padding:12px 16px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.mobile-sticky-cta.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mobile-sticky-cta .btn-primary{width:100%;justify-content:center;padding:14px}

/* RESPONSIVE */
/* Problem Row and Visual classes to replace inline styles */
.problem-row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 60px;
}
.problem-visual {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

/* RESPONSIVE DESIGN STYLES */
/* RESPONSIVE DESIGN STYLES */
@media(max-width:1024px){
  /* Header styling */
  .logo { font-size: 1.8rem; }
  
  /* Hero layout: Stack but KEEP dashboard mockup instead of hiding it! */
  .hero .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    text-align: center;
    width: 100%;
    min-width: 0;
  }
  .hero-content {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    margin: 0 auto;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-stats {
    justify-content: center;
    gap: 40px;
  }
  .hero-visual {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  /* Problem section row */
  .problem-row {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
  }
  .problem-visual {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
  }
  
  /* Pricing layout on Tablet: 2 columns, centered third */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
    gap: 24px;
  }
  .pricing-card.pro-tier {
    grid-column: span 2;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }
  .pricing-card.featured {
    transform: scale(1) !important;
  }
  .pricing-card.featured.reveal {
    transform: translateY(30px) scale(1) !important;
  }
  .pricing-card.featured.reveal.visible {
    transform: translateY(0) scale(1) !important;
  }
  
  /* Panel Showcase on Tablet */
  .panel-showcase-layout {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
    gap: 32px;
  }
  .panel-features-col {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .panel-features-col::-webkit-scrollbar {
    display: none;
  }
  .panel-feature-card {
    min-width: 240px;
    flex-shrink: 0;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media(max-width:768px){
  /* Spacing: Give key landing page sections consistent, generous breathing room (80px instead of cramped spacing) */
  .problem, .solution, .proof, .panel-showcase, .pricing, .faq, .final-cta {
    padding: 80px 0 !important;
  }

  /* Header navigation & hamburger */
  .nav {
    display: none;
  }
  .header-cta {
    display: none; /* Hide header CTA to avoid overlap and clutter, use sticky CTA instead */
  }
  .hamburger {
    display: block;
  }
  
  /* Mobile slide down menu */
  .mobile-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10001;
    background: #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 15px 30px rgba(0,0,0,.12);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    visibility: visible;
  }
  .mobile-menu a {
    color: var(--text2);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: 0.2s;
  }
  .mobile-menu a:last-child {
    border-bottom: none;
  }
  .mobile-menu a:hover {
    color: var(--accent);
    padding-left: 4px;
  }
  .mobile-menu a[href*="final-cta"] {
    margin-top: 8px;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    border-bottom: none;
    box-shadow: 0 2px 12px var(--accent-glow);
    font-feature-settings: "liga" 0, "calt" 0;
  }
  .mobile-menu a[href*="final-cta"]:hover {
    color: #fff !important;
    padding-left: 20px;
    transform: translateY(-1px);
  }

  /* Hero & Headings */
  .hero {
    min-height: auto;
    padding: 100px 0 60px;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero-sub {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }
  .hero-ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .hero-ctas button,
  .hero-ctas a {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
  }
  
  /* Section title sizes and airy spacing */
  .section-title {
    font-size: 1.8rem;
    line-height: 1.25;
    margin-bottom: 16px;
  }
  .section-sub {
    font-size: 1rem;
    margin-bottom: 48px;
  }
  
  /* Single-column layouts with spacious gaps (32px/40px) to prevent vertical squeezing */
  .hero .container,
  .panel-showcase-layout,
  .seo-page-layout,
  .seo-topic-grid,
  .problem-grid,
  .steps,
  .testimonials-grid,
  .dash-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .hero-content,
  .hero-stats {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .steps {
    gap: 40px; /* Generous gap between steps */
  }
  .steps::before {
    display: none;
  }
  
  /* Pricing layout on Mobile: horizontal slide, Gelişim first */
  .pricing-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    max-width: 100%;
    margin: 0;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-card { flex: 0 0 85vw; scroll-snap-align: center; }
  .start-tier { order: 1; }
  .growth-tier { order: 0; }
  .pro-tier { order: 2; }
  .pricing-card.pro-tier {
    grid-column: span 1;
  }
  .pricing-card {
    padding: 36px 28px;
  }
  
  /* Slider track container padding on mobile to avoid edge-touching */
  .proof-slider-container {
    padding: 10px 24px;
  }
  
  /* Live Cockpit Panel Mockup on Mobile */
  .pm-sidebar {
    display: none !important;
  }
  .pm-viewport {
    padding: 16px !important;
  }
  .pm-address-bar {
    width: 150px !important;
    padding: 4px 10px !important;
    font-size: 0.62rem !important;
  }
  .pm-step0-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pm-gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .pm-result-summary {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .pm-result-stat {
    padding: 10px 6px !important;
  }
  .pm-result-num {
    font-size: 1.25rem !important;
  }
  .pm-result-label {
    font-size: 0.52rem !important;
    margin-top: 2px !important;
  }
  .pm-file-chip {
    padding: 6px 10px !important;
    font-size: 0.65rem !important;
  }
  .pm-delivered-archive {
    padding: 10px !important;
  }
  
  /* Mobile sticky cta */
  .mobile-sticky-cta {
    display: block;
  }
  .final-cta h2 {
    font-size: 1.8rem;
  }
  .trust-badges {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .platforms-row {
    gap: 24px;
  }
  .panel-showcase {
    padding: 80px 0;
  }
  .panel-showcase-layout {
    gap: 24px;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-brand { display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:-16px; }
  .footer-toggle { display: inline-flex; align-items:center; gap:8px; margin-top:12px; position:relative; z-index:10003; }
  .footer-toggle::after { content: '▾'; font-size:.55rem; opacity:.7; }
  .footer-toggle.open::after { content: '▴'; }
  .footer-toggle-target { display: none !important; }
  .footer-toggle-target.show { display: block !important; }
  .footer-bottom .legal-links { flex-wrap:wrap; justify-content:center; gap:4px 12px; }
  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .footer-bottom .footer-legal-notice {
    max-width: 100%;
  }
  .footer-bottom .legal-links {
    justify-content: center;
  }
  .footer-payment-methods {
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
    gap: 14px !important;
  }
  
  /* Floating WhatsApp button position adjusting to avoid sticky CTA */
  .whatsapp-float {
    bottom: 88px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

@media(max-width:1024px) and (min-width:769px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:576px){
  /* Deep optimization for small screens */
  .container {
    padding: 0 20px; /* Slightly standard padding for fluid containers */
  }
  
  /* Hero stats: spacious and stylized divider layout on mobile */
  .hero-stats {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin: 24px auto 0;
    padding: 16px 8px;
    border-top: 1px dashed var(--border2);
    border-bottom: 1px dashed var(--border2);
  }
  .hero-stat {
    text-align: center;
    flex: 1;
  }
  .hero-stat .number {
    font-size: 1.45rem;
  }
  .hero-stat .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text3);
    margin-top: 4px;
  }
  
  /* Live Dashboard Mockup: spacious and proportional layout on mobile */
  .dashboard-mockup {
    height: auto;
    min-height: 580px;
    padding: 20px;
  }
  .dash-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dash-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .metric-card {
    padding: 12px;
  }
  .metric-value {
    font-size: 1.5rem;
  }
  .chart-y-axis {
    width: 26px; /* give more space to the chart bars */
  }
  .chart-bars {
    gap: 3px; /* make bars proportional on mobile */
  }
  .chart-timeline {
    gap: 3px;
  }
  .tl-pre, .tl-post {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
  }
  .plat-item {
    padding: 10px 0; /* spacious rows for platforms list */
  }
  .plat-name {
    font-size: 0.75rem;
  }
  .plat-growth {
    font-size: 0.72rem;
  }
  
  /* Problem Visual Chart padding optimization to maximize horizontal room to breathe */
  .problem-visual {
    padding: 20px;
    border-radius: var(--radius);
  }
  
  /* Success Stories (Proof Card) mobile layout optimization */
  .proof-card {
    padding: 24px 20px;
  }
  .proof-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .proof-platform {
    align-self: flex-start !important;
    margin-top: 4px !important;
  }
  .proof-metrics {
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  .proof-metric .value {
    font-size: 1.45rem !important;
  }
  .proof-quote p {
    font-size: 0.85rem;
    line-height: 1.55;
  }
  
  /* Premium textual indicator container for pagination */
  .proof-dots {
    padding: 6px 14px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Abone Paneli Showcase Mobile Optimization */
  .panel-mockup-wrapper {
    padding: 12px !important;
    border-radius: var(--radius);
  }
  .panel-mockup {
    min-height: 480px; /* generous height to avoid squeezed form inputs */
  }
  .pm-topbar {
    padding: 8px 12px !important;
  }
  .pm-logo {
    font-size: 0.95rem !important;
  }
  .pm-user, .pm-stats-row {
    font-size: 0.75rem !important;
  }
  
  /* Step 0: Form Modal */
  .pm-modal-overlay {
    padding: 12px;
  }
  .pm-modal {
    padding: 20px 16px;
    border-radius: 12px;
  }
  .pm-form-grid {
    gap: 12px;
  }
  .pm-field label {
    font-size: 0.65rem;
  }
  .pm-select-val {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .pm-textarea {
    min-height: 90px;
    padding: 12px;
    font-size: 0.75rem;
  }
  .pm-modal-actions {
    margin-top: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .pm-btn-ghost, .pm-btn-accent {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
  }
  
  /* Step 1: Task List */
  .pm-task-list {
    padding: 12px !important;
    gap: 12px;
  }
  .pm-task-card {
    padding: 12px 10px !important;
  }
  .pm-task-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .pm-task-title {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }
  .pm-task-date {
    font-size: 0.65rem !important;
  }
  .pm-task-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-top: 8px !important;
    font-size: 0.7rem !important;
  }
  
  /* Step 2: Results grid */
  .pm-results-grid {
    padding: 12px !important;
    gap: 12px !important;
  }
  .pm-result-summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .pm-result-stat {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
  }
  .pm-result-num {
    font-size: 1.45rem !important;
    margin-bottom: 0 !important;
  }
  .pm-result-label {
    font-size: 0.72rem !important;
    margin-top: 0 !important;
    text-align: right !important;
  }
  
  /* Timeline */
  .pm-timeline {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  .pm-tl-item {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .pm-tl-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .pm-tl-label {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }
  .pm-tl-time {
    align-self: flex-end !important;
    font-size: 0.65rem !important;
    color: var(--text3) !important;
  }
  .pm-file-chip {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
  }
  
  /* FAQ question padding */
  .faq-question {
    font-size: 0.95rem;
    padding: 18px 0;
  }
}

/* INTERACTIVE MOCKUP ANIMATIONS */
@keyframes pulse-glow-success {
  0% {
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
  }
  100% {
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes slideDownIn {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.simulated-new-task {
  animation: pulse-glow-success 2.5s infinite, slideDownIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

/* Hover pauses auto-play progress bar animation */
.panel-showcase-layout:hover .panel-feature-bar {
  animation-play-state: paused !important;
}

.panel-showcase-layout.is-demo-locked:hover .panel-feature-bar {
  animation-play-state: running !important;
}

/* LIVE DEMO PULSING BADGE */
.live-demo-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), #FF8533);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(255,107,0,0.4);
  z-index: 20;
  border: 1px solid rgba(255,255,255,0.2);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.ripple-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}
.ripple-pulse::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: pulse-ring 1.5s infinite ease-out;
}

@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.icon-spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

/* Beautiful High-Contrast Mini Stats */
.pm-stats-row {
  display: flex;
  gap: 10px;
}
.pm-mini-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.72rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
.pm-mini-stat b {
  color: #fff;
  font-size: 0.9rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  background: rgba(255, 107, 0, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 107, 0, 0.25);
}
.pm-mini-stat:nth-child(2) b {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
}
.pm-mini-stat span {
  color: #ffffff !important; /* Fully opaque white, absolutely NOT silky or grey */
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* ==========================================
   AUTHENTIC CUSTOMER COCKPIT PREVIEW SYSTEM
   ========================================== */
.pm-dashboard-body.customer-cockpit {
  --cc-bg: #eef2f6;
  --cc-accent: #eab308;
  --cc-accent-soft: #fff5cc;
  --cc-brand-dark: #0f1115;
  --cc-brand-line: rgba(255, 255, 255, 0.12);
  --cc-soft: #fbfbfa;
  --cc-line: rgba(15, 17, 21, 0.08);

  padding: 16px;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
  background: var(--cc-bg);
  color: #111827;
  font-family: 'Inter', sans-serif;
  height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  border-radius: 16px;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit::-webkit-scrollbar {
  width: 6px;
}
.pm-dashboard-body.customer-cockpit::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* 1. Brand Header Card exactly matching actual subscriber dashboard */
.pm-dashboard-body.customer-cockpit .customer-top {
  width: 100%;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-brand-card {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.2fr) minmax(260px, 2fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 108px;
  padding: 20px 24px !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.14), transparent 36%), var(--cc-brand-dark) !important;
  border: 1px solid rgba(234, 179, 8, 0.28) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 44px rgba(15, 17, 21, 0.16) !important;
  box-sizing: border-box;
  color: #fff !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-lockup {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.pm-dashboard-body.customer-cockpit .customer-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.pm-dashboard-body.customer-cockpit .customer-logo span {
  color: var(--cc-accent) !important;
}

.pm-dashboard-body.customer-cockpit .customer-welcome {
  display: flex !important;
  flex-direction: column !important;
  border-left: 1px solid var(--cc-brand-line) !important;
  padding-left: 16px !important;
}

.pm-dashboard-body.customer-cockpit .customer-welcome span {
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-weight: 750 !important;
  display: block !important;
}

.pm-dashboard-body.customer-cockpit .customer-welcome strong {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.35rem !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  display: block !important;
  margin-top: 2px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats div {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
  min-width: 82px !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats div b {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.12rem !important;
  color: #ffffff !important;
  display: block !important;
  line-height: 1 !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats div span {
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.64) !important;
  font-weight: 850 !important;
  display: block !important;
  margin-top: 4px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats .customer-brand-last {
  min-width: 110px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-logout {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  padding: 8px 14px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-logout:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
  color: #fecaca !important;
}

/* 2. Files Grid matching real files panel */
.pm-dashboard-body.customer-cockpit .customer-files-panel {
  background: linear-gradient(135deg, rgba(15, 17, 21, 0.035), transparent 44%), #fff !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(15, 17, 21, 0.065) !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-file-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 96px;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: none !important;
  border-right: 1px solid rgba(15, 17, 21, 0.06) !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.18s ease, transform 0.18s ease !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card:last-child {
  border-right: none !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card::before {
  content: "" !important;
  position: absolute !important;
  left: 16px;
  right: auto;
  top: 16px;
  bottom: 16px;
  width: 3px;
  height: auto;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--cc-accent), rgba(234, 179, 8, 0.12)) !important;
  opacity: 0.75 !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card:hover {
  background: linear-gradient(180deg, #fff8df, #ffffff) !important;
  border-color: rgba(234, 179, 8, 0.42) !important;
  transform: translateY(-1px) !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin-left: 6px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(234, 179, 8, 0.08)) !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  color: #111827 !important;
  font-size: 1.1rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  color: #111827 !important;
  font-weight: 800 !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card small {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  color: #756b54 !important;
  line-height: 1.2 !important;
}

/* 3. Core Split Board */
.pm-dashboard-body.customer-cockpit .customer-board {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 16px !important;
  box-sizing: border-box;
}

/* Left: Tasks Panel with Branded Header Banner */
.pm-dashboard-body.customer-cockpit .customer-work-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #ffffff !important;
  border: 1px solid var(--cc-line) !important;
  padding: 20px !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, #fffdf6, var(--cc-soft)) !important;
  border-bottom: 1px solid var(--cc-line) !important;
  padding: 16px 20px !important;
  margin: -20px -20px 14px -20px !important;
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head span {
  font-size: 0.72rem !important;
  color: #7c6a38 !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  color: #111827 !important;
  font-weight: 800 !important;
  margin: 2px 0 0 0 !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head strong {
  font-size: 0.74rem !important;
  color: #b77905 !important;
  font-weight: 800 !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-task-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 4px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-section-head h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-section-head span {
  padding: 4px 8px !important;
  background: #fff8df !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  border-radius: 999px !important;
  color: #8a6500 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 14px rgba(15, 17, 21, 0.02) !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-task-toggle {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  background: #fff !important;
  border: 0 !important;
  text-align: left !important;
  cursor: default !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-task-card.stage-work .customer-task-toggle {
  background: linear-gradient(180deg, #ffffff, #eefcf6) !important;
  border-top: 3px solid rgba(20, 184, 166, 0.34) !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card.stage-review .customer-task-toggle {
  background: linear-gradient(180deg, #ffffff, #fff8df) !important;
  border-top: 3px solid rgba(234, 179, 8, 0.42) !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-top div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-top span {
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-top h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  max-height: 3.1em !important;
  min-height: auto !important;
  height: auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

.pm-dashboard-body.customer-cockpit .request-mini-pill {
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  padding: 3px 8px !important;
  border-radius: 100px !important;
  white-space: nowrap;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-mid {
  display: grid !important;
  gap: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-mid strong {
  font-size: 0.8rem !important;
  color: #9a6c00 !important;
  font-weight: 850 !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-mid small {
  font-size: 0.66rem !important;
  color: #6b7280 !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-mid p {
  font-size: 0.72rem !important;
  color: #4b5563 !important;
  font-weight: 750 !important;
  margin: 3px 0 0 0 !important;
  line-height: 1.35 !important;
}

/* Authentic Stage Progress Stepper Dots exactly like real dashboard */
.pm-dashboard-body.customer-cockpit .customer-stage-preview {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 10px !important;
  padding: 2px 0 !important;
  position: relative !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 5px !important;
  height: 2px !important;
  background: #cbd5e1 !important;
  z-index: 1 !important;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  z-index: 2 !important;
  position: relative !important;
  flex: 1 !important;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview span i {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview span b {
  display: block !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.05;
  font-size: 0.46rem;
  letter-spacing: 0;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview span.done i {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview span.active i {
  background: #eab308 !important;
  border-color: #eab308 !important;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.14) !important;
  animation: customerStagePulse 1.45s ease-out infinite !important;
}

@keyframes customerStagePulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.38); }
  70% { box-shadow: 0 0 0 8px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

/* Right: Request Creation Panel */
.pm-dashboard-body.customer-cockpit .customer-side {
  display: block;
}

.pm-dashboard-body.customer-cockpit .customer-request-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #ffffff !important;
  border: 1px solid var(--cc-line) !important;
  padding: 20px !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pm-dashboard-body.customer-cockpit .customer-request-panel .customer-panel-head {
  margin-bottom: 8px !important;
}

.pm-dashboard-body.customer-cockpit .customer-request-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pm-dashboard-body.customer-cockpit .customer-request-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100%;
}

.pm-dashboard-body.customer-cockpit .customer-request-form label span {
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.pm-dashboard-body.customer-cockpit .request-field-input {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 21, 0.12) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
  color: #111827 !important;
  font-weight: 650 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 38px;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .request-field-input.textarea {
  min-height: 84px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.pm-dashboard-body.customer-cockpit .typing-animation-mock {
  font-family: 'Inter', sans-serif !important;
  color: #111827 !important;
  font-style: italic !important;
}

.pm-dashboard-body.customer-cockpit .cursor-mock {
  color: #eab308 !important;
  font-weight: bold !important;
  animation: pm-cursor-blink 1s infinite !important;
}

@keyframes pm-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.pm-dashboard-body.customer-cockpit .customer-submit {
  background: var(--cc-accent) !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  cursor: default !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  box-shadow: 0 8px 20px rgba(234, 179, 8, 0.2) !important;
  width: 100%;
}

/* ========================================================
   UNIFIED DYNAMIC WALKTHROUGH FOCUS LIGHT EFFECTS
   ======================================================== */

/* Step 0: Sınırsız Talep (Glow & Focus on Request Form) */
.pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-request-panel {
  border-color: #eab308 !important;
  box-shadow: 0 10px 30px rgba(234, 179, 8, 0.22) !important;
}
.pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel,
.pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-work-panel {
  opacity: 0.45 !important;
  filter: grayscale(40%) !important;
}

/* Step 1: Canlı İş Takibi (Glow & Focus on Task List) */
.pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-work-panel {
  border-color: #22c55e !important;
  box-shadow: 0 10px 30px rgba(34, 197, 148, 0.22) !important;
}
.pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel,
.pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-request-panel {
  opacity: 0.45 !important;
  filter: grayscale(40%) !important;
}

/* Step 2: Büyüme & Arşiv (Glow & Focus on folders and brand stats) */
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-files-panel {
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.22) !important;
}
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-brand-card {
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15) !important;
}
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-work-panel,
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-request-panel {
  opacity: 0.45 !important;
  filter: grayscale(40%) !important;
}
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card {
  background: #f8fafc !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

/* Simulated Mouse Cursor & Interactive Features Styling */
.pm-dashboard-body.customer-cockpit .pm-mockup-cursor {
  position: absolute !important;
  width: 34px !important;
  height: 34px !important;
  pointer-events: none !important;
  z-index: 999 !important;
  opacity: 0;
  left: 0 !important;
  top: 0 !important;
  transform: translate(100px, 100px);
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease !important;
  will-change: transform;
}

.panel-showcase-layout.is-demo-locked .pm-dashboard-body.customer-cockpit .pm-mockup-cursor {
  display: block !important;
  visibility: visible !important;
}

.pm-dashboard-body.customer-cockpit .pm-mockup-cursor svg {
  width: 30px !important;
  height: 30px !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.38)) drop-shadow(0 0 0 #111317) !important;
}

.pm-dashboard-body.customer-cockpit .pm-mockup-cursor-click-ring {
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  width: 28px !important;
  height: 28px !important;
  border: 3px solid #ff6b00 !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.pm-dashboard-body.customer-cockpit .pm-mockup-cursor-click-ring.animate {
  animation: pm-click-pulse 0.42s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
}

@keyframes pm-click-pulse {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Translucent Dark Backdrop for Step 0 popup simulation */
.pm-dashboard-body.customer-cockpit .customer-cockpit-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 95 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 24px !important;
}

.pm-dashboard-body.customer-cockpit.show-popup-overlay .customer-cockpit-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Centered popup modal behavior on Step 0 */
.pm-dashboard-body.customer-cockpit .customer-request-panel {
  position: relative !important;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
}

.pm-dashboard-body.customer-cockpit.is-mockup:not(.show-popup-modal) .customer-request-panel {
  display: none !important;
}

.pm-dashboard-body.customer-cockpit.show-popup-modal .customer-request-panel {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.02) !important;
  width: 390px !important;
  max-width: 90% !important;
  z-index: 100 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.28) !important;
  border: 1px solid rgba(234, 179, 8, 0.48) !important;
  background: #ffffff !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Success Toast Notification */
.pm-dashboard-body.customer-cockpit .customer-toast {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 14px 22px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(234, 179, 8, 0.48) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  z-index: 110 !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25) !important;
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  pointer-events: none !important;
}

.pm-dashboard-body.customer-cockpit .customer-toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Yeni Talep Button */
.pm-dashboard-body.customer-cockpit .pm-create-request-btn {
  background: var(--cc-accent) !important;
  color: #111827 !important;
  border: 1px solid var(--cc-accent) !important;
  border-radius: 14px !important;
  padding: 8px 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  cursor: default !important;
  transition: all 0.2s ease !important;
  margin-left: auto !important;
  margin-right: 12px !important;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.16) !important;
}

.pm-dashboard-body.customer-cockpit .pm-create-request-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(234, 179, 8, 0.24) !important;
}


/* Responsive adjustments for Mockup Dashboard Cockpit */
@media (max-width: 992px) {
  .pm-dashboard-body.customer-cockpit .customer-board {
    grid-template-columns: 1fr !important;
  }
  .pm-dashboard-body.customer-cockpit {
    height: auto !important;
    max-height: 800px;
  }
}
@media (max-width: 768px) {
  .pm-dashboard-body.customer-cockpit .customer-file-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pm-dashboard-body.customer-cockpit .customer-brand-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pm-dashboard-body.customer-cockpit .customer-brand-stats {
    width: 100% !important;
    justify-content: space-between !important;
  }
}
@media (max-width: 480px) {
  .pm-dashboard-body.customer-cockpit .customer-file-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mini subscriber cockpit redesign for the landing-page showcase */
.panel-showcase {
  background: #f7f9fc;
}

.panel-showcase-bg {
  background:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.55;
}

.panel-showcase-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,249,252,0.45) 42%, rgba(255,255,255,0.88));
}

.panel-showcase .hero-badge {
  background: #111317;
  border-color: rgba(234, 179, 8, 0.36);
  color: #f8fafc;
}

.panel-showcase .hero-badge .dot {
  background: #eab308;
}

.panel-feature-card {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
  padding: 18px;
  gap: 12px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
}

.panel-feature-card.active {
  border-color: rgba(234, 179, 8, 0.55);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  transform: none;
}

.panel-feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #eab308;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.panel-feature-card.active::before {
  opacity: 1;
}

.panel-feature-visual {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 107, 0, 0.16), transparent 52%),
    #111317;
  border: 1px solid rgba(255, 107, 0, 0.28);
  box-shadow: inset 0 -3px 0 rgba(255, 107, 0, 0.65);
  overflow: hidden;
}

.panel-feature-card.active .panel-feature-visual {
  background:
    linear-gradient(145deg, rgba(255, 107, 0, 0.22), transparent 52%),
    #111317;
  border-color: rgba(255, 107, 0, 0.55);
  box-shadow: inset 0 -3px 0 #ff6b00, 0 10px 22px rgba(255, 107, 0, 0.14);
}

.panel-feature-visual::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.visual-window-dot {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6b00;
  box-shadow: 8px 0 0 rgba(255, 255, 255, 0.38);
  z-index: 2;
}

.visual-line {
  position: absolute;
  left: 12px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.72);
  z-index: 2;
}

.visual-line-wide {
  top: 23px;
  width: 23px;
}

.visual-request .visual-line:not(.visual-line-wide) {
  top: 31px;
  width: 15px;
  opacity: 0.55;
}

.visual-submit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 13px;
  height: 7px;
  border-radius: 99px;
  background: #ff6b00;
  z-index: 2;
}

.visual-track-line {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 24px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
}

.visual-track i {
  position: absolute;
  top: 19px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #111317;
  border: 2px solid rgba(255, 255, 255, 0.5);
  z-index: 3;
  box-sizing: border-box;
}

.visual-track i:nth-of-type(1) {
  left: 12px;
}

.visual-track i:nth-of-type(2) {
  left: 19px;
}

.visual-track i:nth-of-type(3) {
  right: 12px;
}

.visual-track i.done,
.visual-track i.active {
  background: #ff6b00;
  border-color: #ff6b00;
}

.visual-track i.active {
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.18);
}

.visual-folder-tab {
  position: absolute;
  left: 12px;
  top: 13px;
  width: 15px;
  height: 7px;
  border-radius: 4px 4px 2px 2px;
  background: #ff6b00;
  z-index: 2;
}

.visual-report i {
  position: absolute;
  bottom: 11px;
  width: 5px;
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.78);
  z-index: 2;
}

.visual-report i:nth-of-type(1) {
  left: 16px;
}

.visual-report i:nth-of-type(2) {
  left: 24px;
}

.visual-report i:nth-of-type(3) {
  left: 32px;
  background: #ff6b00;
}

.panel-feature-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.panel-feature-kicker {
  color: #c2410c;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.panel-feature-card h4 {
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.panel-feature-card p {
  font-size: 0.78rem;
  line-height: 1.48;
}

.panel-feature-progress {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.panel-mockup {
  background: #111317;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

.pm-browser-header {
  background: #151923;
  height: 44px;
}

.pm-dashboard-body.customer-cockpit.is-mockup {
  position: relative !important;
  height: 650px;
  overflow: hidden;
  padding: 12px;
  gap: 12px;
  background: #edf1f5;
  border-radius: 0 0 16px 16px;
}

.pm-dashboard-body.customer-cockpit .customer-top {
  order: 1;
  margin-bottom: 0;
}

.pm-dashboard-body.customer-cockpit .customer-brand-card {
  grid-template-columns: minmax(185px, 0.95fr) minmax(210px, 0.85fr) auto auto !important;
  gap: 8px !important;
  min-height: 86px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), transparent 34%), #111317 !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
}

.pm-dashboard-body.customer-cockpit .customer-logo {
  font-size: 1.02rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-lockup {
  min-width: 0;
  gap: 10px !important;
}

.pm-dashboard-body.customer-cockpit .customer-welcome {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.pm-dashboard-body.customer-cockpit .customer-welcome span {
  font-size: 0.67rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-welcome strong {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem !important;
  white-space: nowrap;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats {
  gap: 6px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats div {
  min-width: 58px !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats .customer-brand-last {
  min-width: 64px !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats div b {
  font-size: 0.98rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-brand-stats div span {
  font-size: 0.6rem !important;
}

.pm-dashboard-body.customer-cockpit .pm-create-request-btn,
.pm-dashboard-body.customer-cockpit .customer-brand-logout {
  border-radius: 10px !important;
  min-height: 36px;
  white-space: nowrap;
  margin-right: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.pm-dashboard-body.customer-cockpit .customer-board {
  order: 3;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr) !important;
  gap: 12px !important;
  min-height: 0;
}

.pm-dashboard-body.customer-cockpit .customer-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  min-width: 0;
}

.pm-dashboard-body.customer-cockpit .customer-request-panel {
  order: 2;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel {
  order: 1;
}

.pm-dashboard-body.customer-cockpit .customer-work-panel,
.pm-dashboard-body.customer-cockpit .customer-request-panel,
.pm-dashboard-body.customer-cockpit .mini-detail-panel,
.pm-dashboard-body.customer-cockpit .customer-files-panel {
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.pm-dashboard-body.customer-cockpit .customer-work-panel,
.pm-dashboard-body.customer-cockpit .customer-request-panel,
.pm-dashboard-body.customer-cockpit .mini-detail-panel {
  padding: 14px !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head {
  margin: -14px -14px 10px -14px !important;
  padding: 11px 14px !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head h2 {
  font-size: 0.92rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-panel-head strong {
  font-size: 0.66rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-section {
  gap: 8px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-section-head h3 {
  font-size: 0.8rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-section-head span {
  font-size: 0.62rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-list {
  gap: 8px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card.sub-step-screen {
  display: flex !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card {
  border-radius: 14px !important;
}

.pm-dashboard-body.customer-cockpit .mini-new-task-card[hidden] {
  display: none !important;
}

.pm-dashboard-body.customer-cockpit .mini-new-task-card.is-visible {
  display: flex !important;
}

.pm-dashboard-body.customer-cockpit .mini-new-task-card.is-dropping {
  animation: miniNewTaskDrop 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes miniNewTaskDrop {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.98);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 220px;
  }
}

.pm-dashboard-body.customer-cockpit .customer-task-card.stage-created .customer-task-toggle {
  background: linear-gradient(180deg, #ffffff, #eff6ff) !important;
  border-top: 3px solid rgba(59, 130, 246, 0.35) !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card.is-selected {
  border-color: rgba(234, 179, 8, 0.52) !important;
  box-shadow: 0 12px 24px rgba(234, 179, 8, 0.18) !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card.is-clicked {
  animation: miniCardClick 0.8s ease both;
}

@keyframes miniCardClick {
  0% { transform: scale(1); }
  45% { transform: scale(1.022); }
  100% { transform: scale(1); }
}

.pm-dashboard-body.customer-cockpit .customer-task-toggle {
  padding: 11px 12px !important;
  gap: 7px !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-top h3 {
  font-size: 0.78rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-top span,
.pm-dashboard-body.customer-cockpit .request-mini-pill {
  font-size: 0.62rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-mid strong {
  font-size: 0.7rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-preview-mid small,
.pm-dashboard-body.customer-cockpit .customer-task-preview-mid p {
  font-size: 0.64rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-stage-preview {
  margin-top: 6px !important;
}

.pm-dashboard-body.customer-cockpit .customer-request-form {
  gap: 8px !important;
}

.pm-dashboard-body.customer-cockpit .request-field-input {
  min-height: 34px;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
}

.pm-dashboard-body.customer-cockpit .request-field-input.textarea {
  min-height: 72px !important;
}

.pm-dashboard-body.customer-cockpit .customer-submit {
  border-radius: 10px !important;
  padding: 10px !important;
  font-size: 0.8rem !important;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel {
  position: relative;
  background: linear-gradient(145deg, #eef4fb 0%, #f8fafc 58%, #fff8df 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  min-height: 178px;
  overflow: hidden;
  transition: all 0.35s ease !important;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2563eb, #eab308);
  opacity: 0.82;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel .customer-panel-head {
  position: relative;
  background: rgba(15, 23, 42, 0.88) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.18) !important;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel .customer-panel-head span,
.pm-dashboard-body.customer-cockpit .mini-detail-panel .customer-panel-head h2,
.pm-dashboard-body.customer-cockpit .mini-detail-panel .customer-panel-head strong {
  color: #ffffff !important;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel .customer-panel-head span {
  opacity: 0.68;
}

.pm-dashboard-body.customer-cockpit .mini-detail-panel .mini-detail-status {
  color: #facc15 !important;
}

.pm-dashboard-body.customer-cockpit .mini-detail-screen {
  display: none;
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.pm-dashboard-body.customer-cockpit .mini-detail-screen.active {
  display: block;
  animation: miniDetailIn 0.24s ease both;
}

@keyframes miniDetailIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pm-dashboard-body.customer-cockpit .mini-detail-screen span {
  color: #2563eb;
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.pm-dashboard-body.customer-cockpit .mini-detail-screen h3 {
  margin: 5px 0 6px;
  font-size: 0.86rem;
  color: #111827;
}

.pm-dashboard-body.customer-cockpit .mini-detail-screen p {
  margin: 0;
  color: #4b5563;
  font-size: 0.68rem;
  line-height: 1.45;
  font-weight: 650;
}

.pm-dashboard-body.customer-cockpit .mini-detail-timeline {
  display: none;
  grid-template-columns: auto 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #64748b;
  font-size: 0.66rem;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 8px;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail div {
  position: relative;
  min-height: 42px;
  padding: 7px 3px 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 850;
  text-align: center;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail i {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 5px;
  border-radius: 99px;
  background: #cbd5e1;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail b {
  display: block;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.05;
  white-space: normal;
  letter-spacing: 0;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail .done {
  border-color: rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail .done i {
  background: #22c55e;
}

.pm-dashboard-body.customer-cockpit .mini-process-rail .active,
.pm-dashboard-body.customer-cockpit .mini-process-rail .mini-live-step.is-live {
  border-color: rgba(37, 99, 235, 0.34);
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.pm-dashboard-body.customer-cockpit .mini-process-rail .active i,
.pm-dashboard-body.customer-cockpit .mini-process-rail .mini-live-step.is-live i {
  background: #2563eb;
}

.pm-dashboard-body.customer-cockpit .mini-detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}

.pm-dashboard-body.customer-cockpit .mini-detail-facts span {
  display: block;
  padding: 8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.1);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 750;
  text-transform: none;
}

.pm-dashboard-body.customer-cockpit .mini-detail-facts b {
  display: block;
  margin-bottom: 2px;
  color: #111827;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.pm-dashboard-body.customer-cockpit .mini-detail-timeline b {
  color: #111827;
}

.pm-dashboard-body.customer-cockpit .mini-detail-timeline i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.pm-dashboard-body.customer-cockpit .mini-live-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.pm-dashboard-body.customer-cockpit .mini-live-step {
  display: block;
  min-height: 42px;
  padding: 7px 3px 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: #ffffff;
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 850;
  text-align: center;
  opacity: 0.46;
  transform: translateY(3px);
  transition: opacity 0.26s ease, transform 0.26s ease, color 0.26s ease;
}

.pm-dashboard-body.customer-cockpit .mini-live-step span {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.05;
  letter-spacing: 0;
}

.pm-dashboard-body.customer-cockpit .mini-live-step i {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 auto 5px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .mini-live-step.is-live {
  opacity: 1;
  transform: translateX(0);
  color: #111827;
}

.pm-dashboard-body.customer-cockpit .mini-live-step.is-live i {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.pm-dashboard-body.customer-cockpit .customer-files-panel {
  order: 2;
  flex-shrink: 0;
  min-height: 252px;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-color: rgba(15, 17, 21, 0.08) !important;
  transition: min-height 0.35s ease, max-height 0.35s ease, opacity 0.35s ease !important;
}

.pm-dashboard-body.customer-cockpit .customer-files-panel .customer-panel-head {
  margin: 0 !important;
  border-radius: 0 !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card {
  min-height: 68px;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 11px 12px !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card span {
  width: 30px !important;
  height: 30px !important;
  margin-left: 4px !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card strong {
  font-size: 0.75rem !important;
}

.pm-dashboard-body.customer-cockpit .customer-file-card small {
  font-size: 0.62rem !important;
}

.pm-dashboard-body.customer-cockpit .mini-file-card.active {
  background: #eff6ff !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: inset 0 -3px 0 rgba(59, 130, 246, 0.58);
}

.pm-dashboard-body.customer-cockpit .mini-file-preview {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
  gap: 7px 12px;
  align-items: stretch;
  min-height: 168px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: #f8fafc;
}

.pm-dashboard-body.customer-cockpit .mini-file-preview .mini-file-label {
  grid-column: 1;
  font-size: 0.6rem;
  color: #2563eb;
  font-weight: 850;
  text-transform: uppercase;
}

.pm-dashboard-body.customer-cockpit .mini-file-preview strong {
  grid-column: 1;
  color: #111827;
  font-size: 0.82rem;
}

.pm-dashboard-body.customer-cockpit .mini-file-preview small {
  grid-column: 1;
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 650;
}

.pm-dashboard-body.customer-cockpit .mini-report-metrics {
  grid-column: 1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-self: start;
  min-height: 64px;
}

.pm-dashboard-body.customer-cockpit .mini-report-metrics span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 6px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(59, 130, 246, 0.14);
  color: #64748b;
  font-size: 0.52rem;
  line-height: 1.05;
  font-weight: 850;
  text-transform: uppercase;
}

.pm-dashboard-body.customer-cockpit .mini-report-metrics b {
  color: #16a34a;
  font-size: 0.78rem;
  line-height: 1;
  margin-bottom: 3px;
}

.pm-dashboard-body.customer-cockpit .mini-file-preview.is-report-live .mini-report-metrics span {
  animation: miniMetricPop 0.26s ease both;
}

.pm-dashboard-body.customer-cockpit .mini-file-preview.is-report-live .mini-report-metrics span:nth-child(2) {
  animation-delay: 0.05s;
}

.pm-dashboard-body.customer-cockpit .mini-file-preview.is-report-live .mini-report-metrics span:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes miniMetricPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pm-dashboard-body.customer-cockpit .mini-report-bars {
  display: none;
  grid-column: 2;
  grid-row: 4;
  height: 34px;
  display: none;
  align-items: end;
  justify-content: flex-end;
  gap: 6px;
}

.pm-dashboard-body.customer-cockpit .mini-report-bars i {
  width: 12px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #3b82f6, #93c5fd);
}

.pm-dashboard-body.customer-cockpit .mini-file-art {
  grid-column: 2;
  grid-row: 1 / span 4;
  min-height: 150px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc,
.pm-dashboard-body.customer-cockpit .mini-sheet-table,
.pm-dashboard-body.customer-cockpit .mini-gallery-board,
.pm-dashboard-body.customer-cockpit .mini-web-board {
  height: 100%;
  min-height: 150px;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), #ffffff 42%);
}

.pm-dashboard-body.customer-cockpit .mini-report-doc header,
.pm-dashboard-body.customer-cockpit .mini-sheet-table header,
.pm-dashboard-body.customer-cockpit .mini-web-board header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #111827;
  font-size: 0.62rem;
  font-weight: 900;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc header small,
.pm-dashboard-body.customer-cockpit .mini-sheet-table header small,
.pm-dashboard-body.customer-cockpit .mini-web-board header small {
  color: #2563eb;
  font-size: 0.52rem;
  font-weight: 900;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc section span {
  padding: 6px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid rgba(59, 130, 246, 0.12);
  color: #64748b;
  font-size: 0.5rem;
  font-weight: 800;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc section strong {
  display: block;
  color: #16a34a;
  font-size: 0.8rem;
  line-height: 1;
}

.pm-dashboard-body.customer-cockpit .mini-doc-chart {
  display: flex;
  align-items: end;
  gap: 6px;
  min-height: 32px;
  padding: 2px 4px 0;
}

.pm-dashboard-body.customer-cockpit .mini-doc-chart i {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #2563eb, #93c5fd);
}

.pm-dashboard-body.customer-cockpit .mini-report-doc footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 5px;
  color: #64748b;
  font-size: 0.52rem;
  font-weight: 800;
}

.pm-dashboard-body.customer-cockpit .mini-report-doc footer b {
  color: #111827;
}

.pm-dashboard-body.customer-cockpit .mini-sheet-table {
  display: grid;
  grid-template-rows: auto repeat(4, 1fr);
  gap: 5px;
  padding: 9px;
  background: #ffffff;
}

.pm-dashboard-body.customer-cockpit .mini-sheet-table .row {
  display: grid;
  grid-template-columns: 1.1fr 0.82fr auto;
  gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.52rem;
  font-weight: 800;
}

.pm-dashboard-body.customer-cockpit .mini-sheet-table .row.head {
  background: #111827;
  color: #ffffff;
}

.pm-dashboard-body.customer-cockpit .mini-sheet-table .row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-dashboard-body.customer-cockpit .mini-sheet-table .row b {
  color: #16a34a;
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  padding: 7px;
  background: #111827;
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board figure {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #f59e0b, #ef4444 52%, #7c2d12);
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board figure:first-child {
  grid-row: 1 / span 2;
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board figure:nth-child(2) {
  background: linear-gradient(135deg, #fbbf24, #f97316 48%, #451a03);
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board figure:nth-child(3) {
  background: linear-gradient(135deg, #fde68a, #fb7185 56%, #881337);
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board figure:nth-child(4) {
  display: none;
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board i {
  position: absolute;
  width: 26px;
  height: 18px;
  right: 8px;
  top: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
}

.pm-dashboard-body.customer-cockpit .mini-gallery-board b {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.52rem;
}

.pm-dashboard-body.customer-cockpit .mini-web-board {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.pm-dashboard-body.customer-cockpit .mini-web-board span {
  position: relative;
  padding: 6px 8px 6px 22px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid rgba(59, 130, 246, 0.13);
  color: #475569;
  font-size: 0.54rem;
  font-weight: 850;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pm-dashboard-body.customer-cockpit .mini-web-board span::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #22c55e;
}

.pm-dashboard-body.customer-cockpit .mini-report-sheet {
  height: 38px;
  padding: 8px 9px 4px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), #ffffff);
}

.pm-dashboard-body.customer-cockpit .mini-report-sheet em,
.pm-dashboard-body.customer-cockpit .mini-report-sheet span {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: #cbd5e1;
  margin-bottom: 4px;
}

.pm-dashboard-body.customer-cockpit .mini-report-sheet em {
  width: 48%;
  background: #2563eb;
}

.pm-dashboard-body.customer-cockpit .mini-report-sheet span:nth-child(2) { width: 84%; }
.pm-dashboard-body.customer-cockpit .mini-report-sheet span:nth-child(3) { width: 66%; }
.pm-dashboard-body.customer-cockpit .mini-report-sheet span:nth-child(4) { width: 74%; }

.pm-dashboard-body.customer-cockpit .mini-report-line {
  height: 26px;
  display: flex;
  align-items: end;
  gap: 5px;
  padding: 0 10px 7px;
}

.pm-dashboard-body.customer-cockpit .mini-report-line i {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #22c55e, #bbf7d0);
}

.pm-dashboard-body.customer-cockpit .mini-menu-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  padding: 9px;
  font-size: 0.55rem;
  font-weight: 800;
  color: #475569;
}

.pm-dashboard-body.customer-cockpit .mini-menu-table span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-dashboard-body.customer-cockpit .mini-menu-table b {
  color: #111827;
}

.pm-dashboard-body.customer-cockpit .mini-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 6px;
  height: 100%;
  box-sizing: border-box;
}

.pm-dashboard-body.customer-cockpit .mini-visual-grid span {
  border-radius: 9px;
  background:
    radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    linear-gradient(135deg, #f59e0b, #ef4444 52%, #7c2d12);
}

.pm-dashboard-body.customer-cockpit .mini-visual-grid span:nth-child(2) {
  background: linear-gradient(135deg, #fbbf24, #f97316 48%, #451a03);
}

.pm-dashboard-body.customer-cockpit .mini-visual-grid span:nth-child(3) {
  background: linear-gradient(135deg, #fde68a, #fb7185 56%, #881337);
}

.pm-dashboard-body.customer-cockpit .mini-visual-grid span:nth-child(4) {
  background: linear-gradient(135deg, #fed7aa, #a16207 55%, #292524);
}

.pm-dashboard-body.customer-cockpit .mini-web-list {
  display: grid;
  gap: 6px;
  padding: 9px;
}

.pm-dashboard-body.customer-cockpit .mini-web-list span {
  height: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, #dbeafe, #ffffff);
  border: 1px solid rgba(59, 130, 246, 0.12);
  color: #475569;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 10px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
}

.pm-dashboard-body.customer-cockpit[data-active-step="0"] .mini-detail-panel {
  opacity: 0.45 !important;
  filter: grayscale(35%) !important;
}

.pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-panel {
  border-color: rgba(34, 197, 94, 0.42) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.16) !important;
}

.pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel {
  min-height: 66px;
  max-height: 66px;
}

.pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .customer-file-grid,
.pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .mini-file-preview {
  display: none !important;
}

.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-board {
  opacity: 0.46 !important;
  filter: grayscale(35%) !important;
  flex: 0 0 70px !important;
  max-height: 70px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-files-panel {
  opacity: 1 !important;
  filter: none !important;
  flex: 0 0 430px !important;
  min-height: 430px !important;
  max-height: 430px !important;
}

.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-preview {
  min-height: 238px;
  grid-template-columns: minmax(170px, 0.62fr) minmax(0, 1.38fr);
  gap: 12px 16px;
  padding: 14px 16px 16px;
}

.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-art,
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-report-doc,
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-sheet-table,
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-gallery-board,
.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-web-board {
  min-height: 220px;
}

.pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-report-metrics {
  align-self: end;
}

.pm-dashboard-body.customer-cockpit.show-popup-modal .customer-request-panel {
  width: 360px !important;
  border-radius: 18px !important;
}

.pm-dashboard-body.customer-cockpit .customer-toast {
  top: 18px !important;
  right: 18px !important;
  border-radius: 12px !important;
}

@media (max-width: 1100px) {
  .pm-dashboard-body.customer-cockpit .customer-brand-card {
    grid-template-columns: 1fr auto !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 992px) {
  .pm-dashboard-body.customer-cockpit.is-mockup {
    height: auto !important;
    max-height: 780px;
    overflow-y: auto;
  }

  .pm-dashboard-body.customer-cockpit .customer-board {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .pm-dashboard-body.customer-cockpit .customer-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pm-dashboard-body.customer-cockpit .mini-file-preview {
    grid-template-columns: 1fr;
  }

  .pm-dashboard-body.customer-cockpit .mini-report-metrics {
    grid-column: 1;
    grid-row: auto;
  }

  .pm-dashboard-body.customer-cockpit .mini-report-bars {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}

/* Focused mobile polish for the locked cockpit demo */
@media (max-width: 768px) {
  .panel-showcase-header .section-sub {
    margin-bottom: 18px !important;
  }

  .panel-benefit-badges {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 360px);
    gap: 8px;
    margin-bottom: 28px;
  }

  .panel-benefit-badges span {
    justify-content: center;
    min-height: 34px;
    font-size: 0.78rem;
    white-space: normal;
    text-align: center;
  }

  .panel-showcase-layout {
    max-width: 100%;
    gap: 20px;
  }

  .panel-features-col {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
  }

  .panel-feature-card {
    min-width: 0;
    padding: 14px;
  }

  .panel-feature-card p {
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .panel-mockup-wrapper {
    padding: 8px !important;
  }

  .pm-browser-header {
    height: 36px;
  }

  .pm-dashboard-body.customer-cockpit.is-mockup {
    height: 640px !important;
    max-height: 640px !important;
    overflow: hidden !important;
    padding: 8px;
    gap: 8px;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 0;
    padding: 9px !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-lockup {
    min-width: 0;
  }

  .pm-dashboard-body.customer-cockpit .customer-logo {
    font-size: 0.96rem !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-welcome {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-stats {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-stats div {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-stats div b {
    font-size: 0.84rem !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-stats div span {
    font-size: 0.54rem !important;
  }

  .pm-dashboard-body.customer-cockpit .pm-create-request-btn {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-brand-logout {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-board {
    grid-template-columns: 1fr !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-board {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-board {
    grid-template-rows: 82px minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-work-panel {
    height: 82px !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-work-panel .customer-panel-head,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-section-head {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-section,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-list {
    height: 100%;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-content: start;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-card {
    min-height: 28px !important;
    overflow: hidden !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-toggle {
    width: 100%;
    padding: 6px !important;
    gap: 0 !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-preview-top {
    align-items: center !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-preview-top > div {
    min-width: 0;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-preview-top span,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .request-mini-pill,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-preview-mid,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-stage-preview {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-task-preview-top h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #111827;
    font-size: 0.52rem !important;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-side {
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #eaf2ff 0%, #f8fafc 62%, #fff7d6 100%) !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-panel .customer-panel-head {
    margin: -10px -10px 6px -10px !important;
    padding: 8px 10px !important;
    background: #111827 !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-screen {
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-screen h3 {
    margin: 3px 0 4px;
    font-size: 0.72rem !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-screen p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.58rem !important;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-process-rail {
    gap: 4px !important;
    margin: 6px 0 !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-process-rail div {
    min-height: 30px !important;
    padding: 4px 2px 3px !important;
    font-size: 0.42rem !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-process-rail i {
    width: 6px;
    height: 6px;
    margin-bottom: 3px;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-facts {
    gap: 5px !important;
    margin: 6px 0 0 !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-facts span {
    padding: 5px !important;
    font-size: 0.52rem !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .mini-detail-facts b {
    margin-bottom: 1px;
    font-size: 0.48rem !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel {
    flex: 0 0 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    opacity: 0.48 !important;
    filter: grayscale(45%) !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel .customer-file-grid,
  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel .mini-file-preview,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .customer-file-grid,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .mini-file-preview {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel .customer-panel-head,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .customer-panel-head {
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel .customer-panel-head h2,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .customer-panel-head h2 {
    font-size: 0.76rem !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel .customer-panel-head span,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .customer-panel-head span {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="0"] .customer-files-panel .customer-panel-head strong,
  .pm-dashboard-body.customer-cockpit[data-active-step="1"] .customer-files-panel .customer-panel-head strong {
    font-size: 0.56rem !important;
  }

  .pm-dashboard-body.customer-cockpit .pm-mockup-cursor {
    width: 22px !important;
    height: 22px !important;
  }

  .pm-dashboard-body.customer-cockpit .pm-mockup-cursor svg {
    width: 22px !important;
    height: 22px !important;
  }

  .pm-dashboard-body.customer-cockpit .pm-mockup-cursor-click-ring {
    left: 7px !important;
    top: 6px !important;
    width: 10px !important;
    height: 10px !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-files-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-files-panel .customer-panel-head {
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card {
    grid-template-columns: 1fr !important;
    min-height: 50px !important;
    padding: 7px 4px !important;
    text-align: center;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card::before,
  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card span,
  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card small {
    display: none !important;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card div {
    justify-content: center;
    min-width: 0;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .customer-file-card strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.55rem !important;
    line-height: 1.08;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pm-dashboard-body.customer-cockpit .mini-file-preview,
  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-preview {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 6px;
    padding: 8px;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-preview .mini-file-label {
    font-size: 0.52rem;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-preview strong {
    font-size: 0.72rem;
  }

  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-preview small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.56rem;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .pm-dashboard-body.customer-cockpit .mini-file-art,
  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-art {
    grid-column: 1;
    grid-row: auto;
    min-height: 142px !important;
  }

  .pm-dashboard-body.customer-cockpit .mini-report-doc,
  .pm-dashboard-body.customer-cockpit .mini-sheet-table,
  .pm-dashboard-body.customer-cockpit .mini-gallery-board,
  .pm-dashboard-body.customer-cockpit .mini-web-board {
    min-height: 142px !important;
  }

  .pm-dashboard-body.customer-cockpit .mini-report-metrics {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pm-dashboard-body.customer-cockpit .mini-report-metrics span {
    min-height: 42px;
    padding: 5px 4px;
    overflow: hidden;
    font-size: 0.46rem;
  }

  .pm-dashboard-body.customer-cockpit .mini-report-metrics b {
    font-size: 0.66rem;
  }

}

@media (max-width: 480px) {
  .panel-feature-card {
    gap: 6px;
  }

  .pm-dashboard-body.customer-cockpit.is-mockup {
    height: 600px !important;
    max-height: 600px !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-file-card {
    min-height: 58px;
    padding: 9px !important;
  }

  .pm-dashboard-body.customer-cockpit .customer-file-card small {
    display: none;
  }

  .pm-dashboard-body.customer-cockpit .mini-file-art,
  .pm-dashboard-body.customer-cockpit[data-active-step="2"] .mini-file-art,
  .pm-dashboard-body.customer-cockpit .mini-report-doc,
  .pm-dashboard-body.customer-cockpit .mini-sheet-table,
  .pm-dashboard-body.customer-cockpit .mini-gallery-board,
  .pm-dashboard-body.customer-cockpit .mini-web-board {
    min-height: 154px !important;
  }

}

/* Striking Brand-Blue Mockup Task Card Hover Highlight with Micro-animations */
.pm-dashboard-body.customer-cockpit .customer-task-card {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card:hover {
  transform: translateY(-4px) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.18), 0 0 0 1px rgba(2, 132, 199, 0.15) !important;
  background: linear-gradient(180deg, #ffffff, #f0f8ff) !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card:hover .customer-task-toggle {
  background: transparent !important;
  border-color: transparent !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card:hover h3 {
  color: #0284c7 !important;
  transition: color 0.2s ease !important;
}

.pm-dashboard-body.customer-cockpit .customer-task-card:hover .customer-stage-preview span i {
  transform: scale(1.22) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

.geo-intro {
  padding: 40px 0;
  position: relative;
  background: #F8FAFC; /* Crisp premium slate-white background */
  overflow: hidden;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Beautiful dynamic background floating orbs */
.geo-intro::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.03) 0%, transparent 70%);
  pointer-events: none;
  animation: float-slow 15s ease-in-out infinite;
}

.geo-intro::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.02) 0%, transparent 70%);
  pointer-events: none;
  animation: float-slow 18s ease-in-out infinite reverse;
}

.geo-intro-card {
  background: #FFFFFF; /* Pure white card for contrast */
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px; /* Softer rounded corners */
  padding: 32px 36px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.01);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.geo-intro-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.01);
}

/* 2-Column Grid for Ultra Compact representation */
.geo-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 36px;
  align-items: center;
}

.geo-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 12px;
}

.geo-right {
  width: 100%;
}

.geo-intro-card h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
  color: #0F172A; /* Deep slate gray */
  line-height: 1.25;
}

.geo-answer-capsule {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #475569; /* Soft dark grey text */
  margin-bottom: 0;
  font-weight: 500;
  padding-bottom: 0;
  border-bottom: none;
}

.geo-answer-capsule strong {
  color: var(--accent);
}

.geo-table-wrapper {
  margin-top: 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.7);
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.015);
}

.geo-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.geo-table tr {
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.25s ease;
}

.geo-table tr:last-child {
  border-bottom: none;
}

.geo-table th, .geo-table td {
  padding: 10px 16px;
}

.geo-table th {
  background: #F8FAFC;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  border-bottom: 2px solid rgba(226, 232, 240, 0.8);
}

.geo-table td:first-child {
  font-weight: 700;
  color: #0F172A;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  width: 22%;
  white-space: nowrap;
}

.metric-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.8;
}

.geo-table td:nth-child(2) {
  color: #64748B; /* Secondary slate color for traditional */
  font-size: 0.82rem;
  line-height: 1.5;
  width: 39%;
}

.geo-table td:nth-child(3) {
  color: #0F172A; /* High contrast text */
  font-weight: 500;
  font-size: 0.84rem;
  line-height: 1.5;
  border-left: 1px solid rgba(226, 232, 240, 0.6);
  width: 39%;
  background: rgba(255, 107, 0, 0.015); /* Super soft warm tint */
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.geo-table td:nth-child(3) strong {
  color: #10B981; /* Premium, bright emerald green check highlight */
  font-weight: 700;
}

/* Micro-animations and contrast focus on hover */
.geo-table tr:hover {
  background: rgba(248, 250, 252, 0.8);
}

.geo-table tr:hover td:nth-child(2) {
  opacity: 0.7;
}

.geo-table tr:hover td:nth-child(3) {
  background: rgba(255, 107, 0, 0.035) !important;
  color: #000000;
}

@media (max-width: 992px) {
  .geo-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .geo-table-wrapper {
    margin-top: 12px;
  }
  .geo-left {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .geo-intro-card {
    padding: 20px 18px;
  }
  .geo-intro-card h2 {
    font-size: 1.45rem;
  }
  .geo-answer-capsule {
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .geo-table th, .geo-table td {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
  .geo-table td:first-child {
    font-size: 0.82rem;
  }
  .geo-table td:nth-child(2) {
    font-size: 0.78rem;
  }
  .geo-table td:nth-child(3) {
    font-size: 0.80rem;
  }
}

@media(max-width:1024px){
  .seo-topic-grid{grid-template-columns:1fr 1fr}
  .seo-page-layout{grid-template-columns:1fr}
  .seo-sidebar{position:static}
}

@media(max-width:768px){
  .seo-topic-grid{grid-template-columns:1fr}
  .seo-fact-grid,
  .seo-related-grid{grid-template-columns:1fr}
  .seo-topic-card{padding:22px}
  .seo-hub{padding:80px 0}
  .seo-page-hero{padding:118px 0 52px}
  .seo-page-hero h1{font-size:2.15rem}
  .seo-page-hero p{font-size:1rem}
  .seo-page{padding:52px 0 76px}
  .seo-table{display:block;overflow-x:auto}
}

/* RestoUp global light theme */
body {
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.03), transparent 34%),
    linear-gradient(225deg, rgba(225, 29, 107, 0.02), transparent 36%),
    var(--bg) !important;
  color: var(--text);
}

.header,
.header.scrolled,
.mobile-menu,
.mobile-sticky-cta {
  background: rgba(248, 250, 252, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(17, 24, 39, 0.08) !important;
}

.logo,
.nav a,
.hamburger span {
  color: var(--text) !important;
}

.nav a:hover,
.logo span,
.section-label,
.hero-stat .number,
.hero-badge,
.pricing-toggle span.active,
.faq-question:hover,
.breadcrumb a:hover {
  color: var(--accent) !important;
}

.hero,
.problem,
.proof,
.faq,
.panel-showcase,
.seo-page,
.seo-hub {
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.03), transparent 34%),
    var(--bg) !important;
}

.solution,
.testimonials,
.pricing,
.final-cta,
.seo-page-hero,
.geo-intro {
  background:
    linear-gradient(180deg, rgba(255, 107, 0, 0.03), transparent 42%),
    var(--bg2) !important;
}

.hero-bg {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 107, 0, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(225, 29, 107, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(22, 163, 74, 0.03) 0%, transparent 40%) !important;
}

.problem-card,
.proof-card,
.why-card,
.proof-banner,
.testimonial-card,
.pricing-card,
.panel-feature-card,
.seo-topic-card,
.seo-page-meta span,
.seo-side-card,
.seo-table,
.modal,
.geo-intro-card,
.geo-table-wrapper,
.form-group input,
.form-group select,
.form-group textarea {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

.pricing-card.growth-tier {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.05), #ffffff) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

.pricing-card.pro-tier {
  background:
    linear-gradient(180deg, rgba(255, 107, 0, 0.05), #ffffff) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

.dashboard-mockup {
  background: #f1f5f9 !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(17, 24, 39, 0.08) !important;
}

.metric-card,
.dash-chart,
.dash-platforms {
  background: #ffffff !important;
  border-color: rgba(17, 24, 39, 0.06) !important;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.03) !important;
  color: var(--text) !important;
}

.proof-btn,
.toggle-switch,
.progress-step,
.coming-soon-tag,
.coming-soon-badge,
.seo-table th,
.geo-table th,
.geo-table tr:hover,
.geo-table tr:hover td:nth-child(3) {
  background: rgba(17, 24, 39, 0.03) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.seo-table th,
.seo-table td,
.geo-table th,
.geo-table td,
.geo-table td:first-child,
.geo-table td:nth-child(2),
.geo-table td:nth-child(3),
.geo-intro-card h2,
.geo-answer-capsule,
.seo-article p,
.seo-article ul,
.seo-article ol,
.seo-side-card a,
.footer-brand p,
.footer a,
.footer-bottom .legal-links a,
.footer-bottom p {
  color: var(--text2) !important;
}

.seo-article h2,
.seo-article h3,
.seo-topic-card h3,
.pricing-card h3,
.problem-card h3,
.testimonial-author strong,
.geo-table td:first-child,
.geo-table td:nth-child(3) {
  color: var(--text) !important;
}

.seo-article .seo-cta-panel h2,
.seo-cta-panel h2 {
  color: #fff !important;
}

.seo-article .seo-cta-panel p,
.seo-cta-panel p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.seo-side-card .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
  text-align: center !important;
}

.seo-table th,
.geo-table th {
  color: #C2410C !important;
}

.seo-callout {
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.06), rgba(225, 29, 107, 0.04)),
    #ffffff !important;
  border: 1px solid rgba(255, 107, 0, 0.16) !important;
  color: var(--text) !important;
}

.btn-primary,
.header-cta,
.step-number,
.testimonial-avatar,
.progress-step.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(255, 107, 0, 0.2) !important;
}

.btn-ghost {
  border: 2px solid rgba(255, 107, 0, 0.42) !important;
  color: var(--accent) !important;
  background: rgba(255, 107, 0, 0.02) !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

.btn-ghost:hover,
.proof-btn:hover {
  background: rgba(255, 107, 0, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-2px) !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(255, 107, 0, 0.38) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1) !important;
}

.footer {
  background:
    linear-gradient(180deg, rgba(255, 107, 0, 0.03), transparent 45%),
    var(--bg3) !important;
  border-top-color: var(--border) !important;
}

.footer .logo,
.footer h4,
.footer a:hover {
  color: var(--text) !important;
}

@media(max-width:768px){
  .header,
  .header.scrolled,
  .mobile-menu,
  .mobile-sticky-cta {
    background: rgba(248, 250, 252, 0.92) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
  }
  .header {
    padding: 10px 0 !important;
  }
  .header .container {
    min-height: 44px;
  }
  .logo {
    color: var(--text) !important;
    font-size: 1.95rem;
    line-height: 1;
  }
  .logo span {
    color: var(--accent) !important;
  }
  .hamburger span {
    background: var(--text) !important;
  }
  .cookie-consent{left:12px;right:12px;bottom:12px;width:auto;transform:none;display:block;padding:16px;border-radius:18px}
  .cookie-consent-mark{display:none}
  .cookie-consent strong{font-size:.98rem}
  .cookie-consent p{font-size:.8rem;line-height:1.5}
  .cookie-consent-links{font-size:.72rem;gap:6px}
  .cookie-consent-actions{display:grid;grid-template-columns:1fr 1.12fr;gap:8px;margin-top:14px}
  .cookie-consent button{width:100%;min-height:44px;padding:11px 8px;font-size:.73rem}
  .cookie-policy-page{padding:24px 14px 56px}
  .cookie-policy-page .legal-topbar{margin-bottom:22px;padding:0 4px}
  .cookie-policy-page .legal-home-link{font-size:.74rem;gap:5px}
  .cookie-policy-card{padding:30px 20px;border-radius:22px}
  .cookie-policy-card .legal-eyebrow{font-size:.68rem;padding:6px 10px}
  .cookie-policy-card h1{font-size:2.25rem;line-height:1.08;margin-bottom:14px}
  .cookie-policy-card .legal-updated{font-size:.76rem;line-height:1.45}
  .cookie-policy-card p{font-size:.94rem;line-height:1.62}
  .cookie-policy-card .legal-toc{padding:16px;margin-top:20px}
  .cookie-policy-card .legal-toc ol{grid-template-columns:1fr;row-gap:2px}
  .cookie-policy-card h2{font-size:1.16rem;margin-top:32px;padding-left:10px}
  .cookie-policy-card .legal-table th,.cookie-policy-card .legal-table td{padding:11px 12px;font-size:.78rem}
  .cookie-policy-card code{overflow-wrap:anywhere}
  .dashboard-mockup{height:auto;min-height:0;padding:16px}
  .dash-chart{display:none !important}
  .proof-slider-container{width:100%;padding:10px 16px}
  .proof-slider-track{gap:14px}
  .proof-card{min-width:0}
  .seo-table{display:block;overflow-x:auto}
  #paytr-checkout-overlay .form-row{flex-direction:column}
  .why-grid{grid-template-columns:1fr}
}

@media(max-width:576px){
  .modal-overlay{padding:0}
  .modal{padding:28px 20px;margin:0 auto;min-height:100vh;border-radius:0;max-width:100%}
  .consent-check{font-size:.74rem}
  .dashboard-mockup{min-height:0;padding:16px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

/* Dashboard Mockup - Premium Light Theme Override */
.dashboard-mockup {
  background: var(--bg) !important; /* Matches the outer page background (#F5F5F4) */
  color: var(--text) !important; /* Dark warm charcoal (#1C1917) */
  border: 1px solid var(--border) !important; /* Subtle outer border */
  outline: 4px solid rgba(255, 107, 0, 0.01) !important; /* Extremely soft brand orange halo */
  box-shadow: var(--shadow-lg) !important; /* Premium light drop shadow */
  height: auto !important; /* Forces dynamic height based on content to prevent overflow */
  min-height: 540px !important;
  padding: 24px !important;
}

.dashboard-mockup .dash-brand-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.dashboard-mockup .dash-proof-link {
  flex: none;
  color: var(--accent) !important;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,107,0,.35);
  padding-bottom: 2px;
}
.dashboard-mockup .dash-proof-link:hover { color: var(--accent2) !important; border-color: var(--accent2); }

.hero-ctas a[href*="assets/brochure/restoup-tanitim-ve-basarilar.pdf"] { display: none !important; }

.dashboard-mockup .dash-brand-name {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Elegant Casual Status Badge & Static Dot */
.dashboard-mockup .dash-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a !important; /* High contrast green online dot */
}

.dashboard-mockup .dash-live-badge {
  display: none !important;
}

.dashboard-mockup .dash-brand-name,
.dashboard-mockup .metric-value,
.dashboard-mockup .dash-plat-title,
.dashboard-mockup h1,
.dashboard-mockup h2,
.dashboard-mockup h3,
.dashboard-mockup h4 {
  color: var(--text) !important; /* Strong dark warm charcoal for optimal legibility */
}

.dashboard-mockup .metric-value.up,
.dashboard-mockup .plat-growth {
  color: #16a34a !important; /* High contrast emerald green */
}

.dashboard-mockup .metric-label,
.dashboard-mockup .chart-y-label,
.dashboard-mockup .tl-pre,
.dashboard-mockup .plat-name {
  color: var(--text2) !important; /* Elegant secondary slate gray for contrast */
}

/* Clean Solid Metric Cards */
.dashboard-mockup .metric-card,
.dashboard-mockup .dash-chart,
.dashboard-mockup .dash-platforms {
  background: #ffffff !important; /* Premium crisp white card faces */
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

.dashboard-mockup .metric-card:hover {
  border-color: var(--border2) !important;
  background: #ffffff !important;
}

/* Clean solid Chart Area background */
.dashboard-mockup .chart-area {
  position: relative !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Recessed chart bar track background */
.dashboard-mockup .chart-bars-wrap {
  background: rgba(28, 25, 23, 0.04) !important; /* Soft recessed track background */
  border-radius: 8px !important;
  padding: 4px !important;
}

/* Inactive historical mockup chart bars (visible Warm Slate Grey) */
.dashboard-mockup .chart-bar[style*="var(--border2)"],
.dashboard-mockup .chart-bar[style*="var(--bg3)"] {
  background: var(--text3) !important; /* Highly visible slate-grey */
  border-radius: 4px 4px 0 0 !important;
  opacity: 0.55 !important;
}

/* Active growth bars with brand sunset orange */
.dashboard-mockup .chart-bar[style*="rgba(255,107,0"],
.dashboard-mockup .chart-bar[style*="linear-gradient"] {
  background: var(--accent) !important; /* RestoUp brand orange */
  border-radius: 4px 4px 0 0 !important;
  opacity: 1 !important;
}

.dashboard-mockup .plat-bar-wrap {
  background: rgba(28, 25, 23, 0.06) !important; /* Soft recessed track for progress bars */
  border-radius: 100px !important;
}

.dashboard-mockup .plat-bar {
  border-radius: 100px !important;
}

#dash-brand-icon {
  display: none !important;
}

.dashboard-mockup .dash-platforms {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* ============================================================================
   CURRENT COCKPIT SHOWCASE
   ============================================================================ */
.legacy-panel-showcase{display:none!important}
.cockpit-demo-showcase{--showcase-duration:220ms;--showcase-ease:cubic-bezier(.22,.61,.36,1);padding:104px 0 120px;background:linear-gradient(180deg,#fafaf9 0%,#f5f5f4 100%);overflow:hidden}
.cockpit-demo-intro{max-width:820px;margin:0 auto 34px;text-align:center}
.cockpit-demo-intro .hero-badge{display:inline-flex;margin-bottom:18px}
.cockpit-demo-intro .section-title{margin:0 auto 14px;max-width:760px}
.cockpit-demo-intro .section-sub{max-width:720px;margin:0 auto;color:var(--text2)}
.cockpit-demo-shell{position:relative;min-height:650px;padding:22px;border:1px solid rgba(15,23,42,.1);border-radius:28px;background:#10151f;box-shadow:0 30px 80px rgba(15,23,42,.18),0 0 0 8px rgba(255,255,255,.72);color:#f8fafc}
.cockpit-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.showcase-stage-rail{display:flex;align-items:center;gap:4px;overflow:auto;scrollbar-width:none}
.showcase-stage-rail::-webkit-scrollbar{display:none}
.showcase-stage-rail button,.showcase-control{font:inherit;color:#aeb9c9;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;transition:color var(--showcase-duration) var(--showcase-ease),background var(--showcase-duration) var(--showcase-ease),border-color var(--showcase-duration) var(--showcase-ease),transform var(--showcase-duration) var(--showcase-ease)}
.showcase-stage-rail button{padding:9px 12px;font-size:.72rem;font-weight:800;white-space:nowrap;letter-spacing:.02em}
.showcase-stage-rail button span{margin-left:5px;color:#6f7b8d;font-weight:600}
.showcase-stage-rail button[aria-current="step"]{color:#fff;background:rgba(255,107,0,.16);border-color:rgba(255,145,40,.42)}
.showcase-stage-rail button[aria-current="step"] span{color:#ffd6b5}
.showcase-playback{display:flex;gap:6px;flex:none}
.showcase-control{width:34px;height:34px;border-color:rgba(255,255,255,.13);font-weight:800}
.showcase-control:hover,.showcase-control:focus-visible{color:#fff;border-color:#ff8b24;background:rgba(255,107,0,.15);transform:translateY(-1px)}
.showcase-play{color:#ffc078}
.showcase-progress-track{height:3px;margin:0 0 18px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.showcase-progress-track span{display:block;width:var(--showcase-progress,25%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff6b00,#ffc247);transition:width var(--showcase-duration) var(--showcase-ease)}
.showcase-stage-stack{position:relative;min-height:550px}
.showcase-stage-panel{min-height:550px;opacity:0;transform:translateY(10px);transition:opacity var(--showcase-duration) var(--showcase-ease),transform var(--showcase-duration) var(--showcase-ease);pointer-events:none}
.showcase-stage-panel.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.showcase-stage-panel[hidden]{display:none}
.showcase-stage-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin:8px 0 20px}
.showcase-eyebrow{display:block;color:#ffab5e;font-size:.68rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.showcase-stage-heading h3{margin:6px 0 0;color:#fff;font-size:1.4rem;line-height:1.15}
.showcase-live-badge,.showcase-step-count,.showcase-draft-count,.showcase-calendar-summary{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#cbd5e1;font-size:.72rem;font-weight:750;white-space:nowrap}
.showcase-live-badge i,.demo-brand-filter button i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.demo-brand-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.demo-brand-filter button{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(15,23,42,.12);border-radius:999px;background:#fff;color:#475569;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;transition:all var(--showcase-duration) var(--showcase-ease)}
.demo-brand-filter button[aria-pressed="true"]{color:#111827;border-color:#ff9a43;background:#fff7ed;box-shadow:0 4px 14px rgba(255,107,0,.13)}
.cockpit-preview-grid{display:grid;grid-template-columns:190px 1fr;min-height:474px;border:1px solid rgba(15,23,42,.1);border-radius:18px;overflow:hidden;background:#f8fafc;color:#1e293b}
.cockpit-preview-sidebar{display:flex;flex-direction:column;padding:18px 14px;background:#f1f5f9;border-right:1px solid #e2e8f0}
.demo-brand-lockup{display:flex;align-items:center;gap:9px;padding:8px 6px 18px;border-bottom:1px solid #dbe3ec}.demo-brand-lockup>div{display:flex;flex-direction:column;min-width:0}.demo-brand-lockup strong{font-size:.8rem;color:#172033}.demo-brand-lockup small{font-size:.62rem;color:#94a3b8}.demo-brand-lockup b{margin-left:auto;color:#94a3b8}.demo-brand-mark{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;border-radius:9px;background:#111827;color:#ff9a43;font-weight:900;font-size:.9rem}.demo-sidebar-nav{display:grid;gap:5px;padding:18px 0}.demo-sidebar-nav span{display:flex;gap:8px;align-items:center;padding:9px 8px;border-radius:8px;color:#7b8798;font-size:.7rem}.demo-sidebar-nav span.is-selected{background:#fff0df;color:#d85a00}.demo-sidebar-nav b{font-weight:750}.demo-sidebar-note{margin-top:auto;padding:11px;border-radius:10px;background:#fff;border:1px solid #e5e7eb}.demo-sidebar-note strong,.demo-sidebar-note span{display:block;font-size:.65rem}.demo-sidebar-note strong{color:#334155}.demo-sidebar-note span{margin-top:4px;color:#94a3b8}
.cockpit-preview-main{padding:18px;background:#f8fafc}.demo-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.demo-kpi-row>div{padding:12px;border:1px solid #e2e8f0;border-radius:11px;background:#fff}.demo-kpi-row small,.demo-kpi-row span{display:block;color:#94a3b8;font-size:.6rem}.demo-kpi-row strong{display:block;margin:4px 0;font-size:1.35rem;color:#172033}.demo-kpi-row span{color:#16a34a}.cockpit-preview-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.demo-work-card,.demo-recent-card{padding:14px;border:1px solid #e2e8f0;border-radius:13px;background:#fff}.demo-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.demo-card-head span{display:block;color:#94a3b8;font-size:.57rem;font-weight:850;letter-spacing:.08em}.demo-card-head h4{margin:4px 0 0;font-size:.9rem;color:#1e293b}.demo-card-head em,.demo-card-head a{font-size:.62rem;font-style:normal;font-weight:800;color:#f97316}.demo-card-head em.is-planned{color:#2563eb}.demo-task-item{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 0;border-top:1px solid #eef2f7}.demo-task-item>div{min-width:0;flex:1}.demo-task-item strong,.demo-task-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-task-item strong{font-size:.7rem}.demo-task-item small{margin-top:3px;color:#94a3b8;font-size:.61rem}.demo-task-item>b{font-size:.62rem;color:#f97316}.status-dot{width:8px;height:8px;border-radius:50%;flex:none}.status-dot.working{background:#f59e0b}.status-dot.planned{background:#3b82f6}.status-dot.completed{background:#22c55e}.demo-planned-card{background:linear-gradient(180deg,#eff6ff,#fff)}.demo-planned-card>p{margin:13px 0;color:#64748b;font-size:.68rem;line-height:1.45}.planned-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #dbeafe;color:#64748b;font-size:.63rem}.planned-row b{color:#334155}.demo-recent-card{margin-top:12px}.recent-items{display:grid;gap:8px;margin-top:11px}.recent-items span{display:flex;align-items:center;gap:7px;color:#475569;font-size:.66rem}.recent-items i{width:6px;height:6px;border-radius:50%;background:#22c55e}.recent-items small{margin-left:auto;color:#94a3b8;font-size:.59rem}
.assistant-preview-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}.assistant-request-card,.assistant-side-note{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,#192333,#111827);padding:24px}.assistant-request-top{display:flex;align-items:center;gap:10px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}.assistant-request-top>div{display:flex;flex-direction:column}.assistant-request-top strong{font-size:.85rem}.assistant-request-top small{color:#94a3b8;font-size:.65rem}.assistant-online{margin-left:auto;color:#86efac;font-size:.62rem}.assistant-online i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#22c55e}.assistant-request-card label{display:block;margin:22px 0 8px;color:#94a3b8;font-size:.65rem;font-weight:800;letter-spacing:.1em}.assistant-request-box{min-height:180px;padding:16px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.05);color:#f8fafc;font-size:1rem;line-height:1.65}.assistant-request-box:not(.is-complete)::after{content:'|';color:#ff9a43;animation:showcase-caret 1s steps(1) infinite}.assistant-request-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:#94a3b8;font-size:.65rem}.assistant-request-footer b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:#f59e0b;color:#111827;font-size:1.1rem}.assistant-side-note{background:linear-gradient(145deg,rgba(255,107,0,.16),rgba(17,24,39,.95))}.assistant-side-note h4{margin:10px 0 8px;font-size:1.4rem;line-height:1.15}.assistant-side-note p{margin:0;color:#cbd5e1;font-size:.78rem;line-height:1.6}.assistant-signal{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:#cbd5e1;font-size:.68rem}.assistant-signal i{width:8px;height:8px;border-radius:50%;background:#22c55e}.assistant-signal b{margin-left:auto;color:#86efac;font-size:.62rem}
.demo-draft-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.demo-draft-card{display:flex;flex-direction:column;min-height:330px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:#192333;transition:transform var(--showcase-duration) var(--showcase-ease),border-color var(--showcase-duration) var(--showcase-ease)}.demo-draft-card:hover{transform:translateY(-4px);border-color:#ff9a43}.draft-card-top{display:flex;justify-content:space-between;gap:6px}.draft-category,.draft-status{padding:5px 7px;border-radius:6px;background:rgba(255,154,67,.15);color:#ffc078;font-size:.58rem;font-weight:800}.draft-status{background:rgba(34,197,94,.12);color:#86efac}.demo-draft-card h4{margin:22px 0 10px;font-size:.92rem;line-height:1.28}.demo-draft-card p{margin:0;color:#b6c2d1;font-size:.7rem;line-height:1.6}.demo-draft-card footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:#94a3b8;font-size:.58rem}.demo-draft-card footer b{color:#ffab5e;font-size:1rem}
.calendar-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center}.calendar-toolbar .demo-brand-filter{margin:0}.calendar-legend{display:flex;flex-wrap:wrap;gap:12px;color:#aeb9c9;font-size:.64rem}.calendar-legend span{display:inline-flex;align-items:center;gap:5px}.calendar-legend i{width:7px;height:7px;border-radius:50%}.calendar-legend i.planned{background:#3b82f6}.calendar-legend i.working{background:#f59e0b}.calendar-legend i.completed{background:#22c55e}.demo-calendar{margin-top:16px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:#192333}.calendar-week{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.calendar-week span{padding:10px;text-align:center;border-radius:9px;color:#94a3b8;font-size:.63rem;line-height:1.6}.calendar-week span b{color:#f8fafc;font-size:1rem}.calendar-week span.is-today{background:rgba(255,107,0,.15);color:#ffc078}.calendar-items{display:grid;gap:9px}.calendar-items article{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#111827;transition:opacity var(--showcase-duration) var(--showcase-ease),transform var(--showcase-duration) var(--showcase-ease)}.calendar-items article[hidden]{display:none}.calendar-items article>i{width:9px;height:9px;border-radius:50%;flex:none}.calendar-items article[data-status="planned"]>i{background:#3b82f6}.calendar-items article[data-status="working"]>i{background:#f59e0b}.calendar-items article[data-status="completed"]>i{background:#22c55e}.calendar-items article div{display:flex;flex-direction:column;gap:3px;flex:1}.calendar-items article b{color:#ffab5e;font-size:.64rem}.calendar-items article strong{font-size:.76rem}.calendar-items article small{color:#94a3b8;font-size:.62rem}.calendar-items article>span{color:#94a3b8;font-size:.62rem}
.assistant-side-note h4{color:#fff}
@keyframes showcase-caret{0%,45%{opacity:1}46%,100%{opacity:0}}
@media (max-width:900px){.cockpit-demo-shell{padding:16px}.cockpit-preview-grid{grid-template-columns:1fr}.cockpit-preview-sidebar{display:none}.cockpit-preview-columns{grid-template-columns:1fr}.demo-draft-list{grid-template-columns:repeat(2,1fr)}.showcase-stage-stack,.showcase-stage-panel{min-height:650px}.assistant-preview-grid{grid-template-columns:1fr}.assistant-side-note{display:none}}
@media (max-width:620px){.cockpit-demo-showcase{padding:72px 0}.cockpit-demo-shell{min-height:0;padding:12px;border-radius:20px}.cockpit-demo-toolbar{align-items:flex-start;flex-direction:column}.showcase-stage-rail{width:100%}.showcase-stage-rail button{padding:8px 9px;font-size:.66rem}.showcase-playback{align-self:flex-end;margin-top:-42px}.showcase-stage-heading{flex-direction:column;margin-bottom:16px}.showcase-stage-heading h3{font-size:1.15rem}.showcase-live-badge,.showcase-step-count,.showcase-draft-count,.showcase-calendar-summary{font-size:.63rem}.showcase-stage-stack,.showcase-stage-panel{min-height:0}.cockpit-preview-main{padding:10px}.demo-kpi-row{gap:6px}.demo-kpi-row>div{padding:9px 7px}.demo-kpi-row strong{font-size:1.05rem}.demo-kpi-row small,.demo-kpi-row span{font-size:.52rem}.demo-work-card,.demo-recent-card{padding:11px}.demo-task-item strong{font-size:.64rem}.demo-task-item small{font-size:.56rem}.demo-draft-list{grid-template-columns:1fr}.demo-draft-card{min-height:0}.calendar-toolbar{align-items:flex-start;flex-direction:column}.calendar-legend{gap:8px}.demo-calendar{padding:10px}.calendar-items article{align-items:flex-start;padding:11px 10px}.calendar-items article>span{margin-left:auto}.assistant-request-card{padding:16px}.assistant-request-box{min-height:190px;font-size:.85rem}.demo-brand-filter button{font-size:.66rem;padding:7px 9px}}
@media (prefers-reduced-motion:reduce){.cockpit-demo-showcase *,.cockpit-demo-showcase *::before,.cockpit-demo-showcase *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.showcase-stage-panel{transform:none}.assistant-request-box:not(.is-complete)::after{animation:none}.demo-draft-card:hover,.showcase-control:hover{transform:none}}

/* ============================================================================
   REAL COCKPIT REQUEST ANIMATION SHOWCASE
   ============================================================================ */
.legacy-cockpit-showcase,.legacy-panel-showcase{display:none!important}
.cockpit-demo-showcase{--demo-bg:#eef2f6;--demo-ink:#0f1115;--demo-line:#dfe6ee;--demo-accent:#eab308;--demo-orange:#ff6b00;--demo-ease:cubic-bezier(.22,.61,.36,1);padding:104px 0 120px;background:linear-gradient(180deg,#fafaf9 0%,#f1f3f5 100%);overflow:hidden}
.cockpit-demo-intro{max-width:820px;margin:0 auto 30px;text-align:center}.cockpit-demo-intro .hero-badge{display:inline-flex;margin-bottom:18px}.cockpit-demo-intro .section-title{margin:0 auto 14px}.cockpit-demo-intro .section-sub{max-width:760px;margin:0 auto;color:var(--text2)}
.cockpit-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto 10px;color:#64748b}.cockpit-demo-status{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800}.cockpit-demo-status i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}.cockpit-demo-controls{display:flex;align-items:center;gap:7px}.cockpit-demo-controls button{border:1px solid #d8e0e8;background:#fff;color:#334155;border-radius:9px;padding:7px 11px;font:inherit;font-size:.68rem;font-weight:800;cursor:pointer;transition:color 220ms var(--demo-ease),border-color 220ms var(--demo-ease),background 220ms var(--demo-ease),transform 220ms var(--demo-ease)}.cockpit-demo-controls button:first-child{width:34px;padding:7px}.cockpit-demo-controls button:hover,.cockpit-demo-controls button:focus-visible{border-color:#eab308;background:#fffbeb;color:#92400e;transform:translateY(-1px)}
.cockpit-demo-canvas{position:relative;max-width:1180px;min-height:720px;margin:0 auto;border:1px solid rgba(15,23,42,.14);border-radius:24px;background:#0c111a;box-shadow:0 30px 80px rgba(15,23,42,.18),0 0 0 8px rgba(255,255,255,.7);overflow:hidden;color:#0f172a}.demo-browser-chrome{height:32px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#151c27;color:#778498;border-bottom:1px solid rgba(255,255,255,.08);font-size:.6rem}.demo-browser-chrome>span{width:7px;height:7px;border-radius:50%;background:#f87171}.demo-browser-chrome>span:nth-child(2){background:#fbbf24}.demo-browser-chrome>span:nth-child(3){background:#34d399}.demo-browser-chrome b{margin-left:12px;font-weight:650;color:#8290a4}.demo-browser-chrome i{width:90px;height:5px;margin-left:auto;border-radius:99px;background:rgba(255,255,255,.12)}
.demo-cockpit-app{min-height:688px;background:var(--demo-bg);transition:background 300ms var(--demo-ease)}.demo-cockpit-topbar{display:flex;align-items:center;gap:18px;min-height:76px;padding:14px 24px;background:linear-gradient(135deg,#0f1115,#171d27);color:#fff;border-bottom:1px solid rgba(234,179,8,.25)}.demo-cockpit-brand{display:flex;align-items:baseline;gap:10px;min-width:180px}.demo-cockpit-brand strong{font-family:'Outfit',sans-serif;font-size:1.45rem;font-weight:900;letter-spacing:-.04em}.demo-cockpit-brand strong span{color:#eab308}.demo-cockpit-brand small{color:rgba(255,255,255,.55);font-size:.66rem;font-weight:750}.demo-brand-switcher{display:flex;gap:7px;flex:1;justify-content:center}.demo-brand-switcher button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.04);color:#aeb8c7;font:inherit;font-size:.67rem;font-weight:800;cursor:pointer;transition:background 220ms var(--demo-ease),border-color 220ms var(--demo-ease),color 220ms var(--demo-ease)}.demo-brand-switcher button i{width:7px;height:7px;border-radius:50%;background:#cbd5e1}.demo-brand-switcher button[aria-pressed="true"]{border-color:rgba(234,179,8,.72);background:rgba(234,179,8,.14);color:#fff}.demo-brand-switcher button[aria-pressed="true"] i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}.demo-new-request{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:0;border-radius:9px;background:#f59e0b;color:#17120b;font:inherit;font-size:.72rem;font-weight:900;white-space:nowrap;cursor:pointer;box-shadow:0 8px 22px rgba(245,158,11,.22);transition:transform 260ms var(--demo-ease),box-shadow 260ms var(--demo-ease),background 260ms var(--demo-ease)}.demo-new-request span{font-size:1rem;line-height:1}.demo-new-request:hover,.demo-new-request:focus-visible,.cockpit-demo-canvas[data-demo-state="request-opening"] .demo-new-request{background:#fbbf24;transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px rgba(245,158,11,.34)}.cockpit-demo-canvas[data-demo-state="request-opening"] .demo-new-request{animation:demo-new-request-pulse 1s var(--demo-ease) infinite}
.demo-cockpit-layout{display:grid;grid-template-columns:188px minmax(0,1fr);min-height:612px}.demo-cockpit-sidebar{display:flex;flex-direction:column;padding:18px 12px;background:#f7f9fb;border-right:1px solid var(--demo-line)}.demo-sidebar-profile{display:flex;align-items:center;gap:9px;padding:8px 7px 18px;border-bottom:1px solid var(--demo-line)}.demo-sidebar-profile>div{display:flex;flex-direction:column;min-width:0}.demo-sidebar-profile strong{overflow:hidden;color:#172033;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.demo-sidebar-profile small{margin-top:3px;color:#94a3b8;font-size:.58rem}.demo-sidebar-profile>b{margin-left:auto;color:#94a3b8}.demo-sidebar-avatar{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;flex:none;border-radius:9px;background:#111827;color:#eab308;font-weight:900}.demo-cockpit-sidebar nav{display:grid;gap:5px;padding:18px 0}.demo-cockpit-sidebar nav a{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:8px;color:#7b8798;font-size:.68rem;font-weight:700;text-decoration:none}.demo-cockpit-sidebar nav a.is-active{background:#fff2d2;color:#b45309}.demo-sidebar-help{margin-top:auto;padding:11px;border:1px solid #e7edf3;border-radius:10px;background:#fff}.demo-sidebar-help strong,.demo-sidebar-help span{display:block}.demo-sidebar-help strong{color:#334155;font-size:.63rem}.demo-sidebar-help span{margin-top:5px;color:#94a3b8;font-size:.57rem;line-height:1.45}
.demo-cockpit-main{min-width:0;padding:22px;background:#eef2f6}.demo-cockpit-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.demo-cockpit-heading>div:first-child>span,.demo-product-card-head span,.demo-calendar-head>div>span{display:block;color:#94a3b8;font-size:.58rem;font-weight:900;letter-spacing:.1em}.demo-cockpit-heading h3{margin:5px 0 0;color:#172033;font-family:'Outfit',sans-serif;font-size:1.25rem}.demo-cockpit-date{display:flex;align-items:center;gap:7px;color:#64748b;font-size:.65rem;font-weight:750}.demo-cockpit-date i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}.demo-cockpit-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.demo-cockpit-metrics>div{padding:12px 14px;border:1px solid #e1e8ef;border-radius:12px;background:#fff}.demo-cockpit-metrics small,.demo-cockpit-metrics em{display:block;color:#94a3b8;font-size:.58rem;font-style:normal}.demo-cockpit-metrics strong{display:block;margin:5px 0;color:#172033;font-family:'Outfit',sans-serif;font-size:1.3rem;line-height:1}.demo-cockpit-metrics em{color:#16a34a;font-size:.57rem}.demo-cockpit-bento{display:grid;grid-template-columns:1fr 1.05fr .78fr;gap:11px;align-items:start}.demo-product-card{min-width:0;padding:14px;border:1px solid #e1e8ef;border-radius:13px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.025)}.demo-product-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.demo-product-card-head h4{margin:4px 0 0;color:#172033;font-family:'Outfit',sans-serif;font-size:.83rem}.demo-product-card-head h4 sup{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:2px;border:1px solid #cbd5e1;border-radius:50%;color:#94a3b8;font-size:.48rem}.demo-product-card-head em{color:#d97706;font-size:.55rem;font-style:normal;font-weight:900;white-space:nowrap}.demo-planned-card{background:linear-gradient(180deg,#fffdf7,#fff)}.demo-planned-card>p{margin:13px 0;color:#64748b;font-size:.61rem;line-height:1.5}.demo-planned-item{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-top:1px solid #f0f2f4}.demo-planned-item>i{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}.demo-planned-item>div{flex:1;min-width:0}.demo-planned-item strong,.demo-planned-item small{display:block}.demo-planned-item strong{overflow:hidden;color:#334155;font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.demo-planned-item small{margin-top:3px;color:#94a3b8;font-size:.56rem}.demo-planned-item b{color:#2563eb;font-size:.55rem;white-space:nowrap}.demo-task-list{margin-top:10px}.demo-task-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #f0f2f4;transition:opacity 300ms var(--demo-ease),transform 300ms var(--demo-ease),background 300ms var(--demo-ease)}.demo-task-row[hidden]{display:none}.demo-task-row>i{width:8px;height:8px;flex:none;border-radius:50%}.demo-task-row>i.working{background:#f59e0b}.demo-task-row>i.review{background:#3b82f6}.demo-task-row>i.completed{background:#22c55e}.demo-task-row>i.created{background:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.12)}.demo-task-row>div{min-width:0;flex:1}.demo-task-row strong,.demo-task-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-task-row strong{color:#334155;font-size:.63rem}.demo-task-row small{margin-top:3px;color:#94a3b8;font-size:.55rem}.demo-task-row>b{color:#f97316;font-size:.58rem}.demo-created-task{background:#faf5ff;border-radius:8px;padding-left:6px;padding-right:6px;animation:demo-created-task-in 500ms var(--demo-ease) both}.demo-activity-list{display:grid;gap:10px;margin-top:12px}.demo-activity-list span{display:grid;grid-template-columns:7px 1fr;gap:6px;align-items:start}.demo-activity-list i{width:6px;height:6px;margin-top:4px;border-radius:50%;background:#22c55e}.demo-activity-list b{color:#475569;font-size:.59rem;line-height:1.35}.demo-activity-list small{grid-column:2;color:#94a3b8;font-size:.54rem}.demo-activity-card .demo-product-card-head a{color:#f97316;font-size:.58rem;font-weight:850;text-decoration:none}
.demo-calendar-drawer{margin-top:12px;padding:14px;border:1px solid #d9e2eb;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06);animation:demo-calendar-in 520ms var(--demo-ease) both}.demo-calendar-drawer[hidden]{display:none}.demo-calendar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.demo-calendar-head h4{margin:4px 0 0;color:#172033;font-family:'Outfit',sans-serif;font-size:.9rem}.demo-calendar-head button{width:25px;height:25px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#94a3b8;font-size:1rem;line-height:1;cursor:pointer}.demo-calendar-kpis{display:flex;gap:7px;margin:13px 0}.demo-calendar-kpis span{display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:8px;background:#f8fafc;color:#64748b;font-size:.56rem;font-weight:750}.demo-calendar-kpis b{font-family:'Outfit',sans-serif;font-size:.9rem}.demo-calendar-kpis .planned b{color:#0284c7}.demo-calendar-kpis .working b{color:#d97706}.demo-calendar-kpis .completed b{color:#059669}.demo-calendar-kpis .remaining b{color:#ff6b00}.demo-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.demo-calendar-toolbar>strong{color:#334155;font-size:.67rem}.demo-calendar-toolbar>div{display:flex;align-items:center;gap:7px;color:#94a3b8;font-size:.52rem}.demo-calendar-toolbar i{width:6px;height:6px;border-radius:50%}.demo-calendar-toolbar i.planned{background:#0284c7}.demo-calendar-toolbar i.working{background:#d97706}.demo-calendar-toolbar i.completed{background:#059669}.demo-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.demo-calendar-grid>span{padding:5px 2px;text-align:center;color:#94a3b8;font-size:.53rem;font-weight:850}.demo-calendar-grid>b{position:relative;min-height:45px;padding:7px 5px;border:1px solid #eef2f5;border-radius:7px;color:#64748b;font-size:.61rem;font-weight:750}.demo-calendar-grid>b.is-today{border-color:#f59e0b;background:#fffbeb;color:#92400e}.demo-calendar-grid>b em{display:block;margin-top:3px;color:#f59e0b;font-size:.43rem;font-style:normal}.demo-calendar-grid>b i{display:block;width:5px;height:5px;margin-top:5px;border-radius:50%}.demo-calendar-grid>b small{display:block;overflow:hidden;margin-top:3px;color:#64748b;font-size:.43rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.demo-calendar-grid>b.has-working i{background:#d97706}.demo-calendar-grid>b.has-completed i{background:#059669}.demo-calendar-grid>b.has-planned i{background:#0284c7}.demo-calendar-next{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px;border-radius:9px;background:#fffbeb}.demo-calendar-next>i{width:7px;height:7px;border-radius:50%}.demo-calendar-next>i.working{background:#d97706}.demo-calendar-next div{flex:1}.demo-calendar-next strong,.demo-calendar-next small{display:block}.demo-calendar-next strong{color:#475569;font-size:.59rem}.demo-calendar-next small{margin-top:3px;color:#94a3b8;font-size:.53rem}.demo-calendar-next>b{color:#d97706;font-size:.56rem;white-space:nowrap}
.demo-request-overlay{position:absolute;inset:32px 0 0;z-index:20;display:flex;align-items:center;justify-content:center;padding:26px;background:rgba(15,17,21,.52);backdrop-filter:blur(3px);animation:demo-overlay-in 360ms var(--demo-ease) both}.demo-request-overlay[hidden]{display:none}.demo-request-backdrop{position:absolute;inset:0}.demo-request-dialog{position:relative;width:min(590px,calc(100% - 26px));max-height:calc(100% - 24px);overflow:auto;border:1px solid rgba(234,179,8,.35);border-radius:18px;background:#fff;box-shadow:0 28px 70px rgba(15,23,42,.32);color:#172033;animation:demo-dialog-in 520ms var(--demo-ease) both}.demo-request-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid #e8edf2}.demo-request-head span,.demo-draft-panel-head span{display:block;color:#d97706;font-size:.58rem;font-weight:900;letter-spacing:.1em}.demo-request-head h3{margin:5px 0 3px;font-family:'Outfit',sans-serif;font-size:1.2rem}.demo-request-head small{color:#94a3b8;font-size:.62rem}.demo-request-head button{width:28px;height:28px;border:1px solid #e2e8f0;border-radius:50%;background:#fff;color:#64748b;font-size:1.1rem;cursor:pointer}.demo-request-body{padding:20px 22px}.demo-request-brand{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #e8edf2;border-radius:10px;background:#f8fafc}.demo-request-brand>div{display:flex;flex-direction:column;flex:1}.demo-request-brand strong{font-size:.7rem}.demo-request-brand small{margin-top:2px;color:#94a3b8;font-size:.55rem}.demo-assistant-ready{color:#16a34a;font-size:.58rem;font-weight:800}.demo-assistant-ready i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#22c55e}.demo-request-body>label{display:block;margin:18px 0 7px;color:#64748b;font-size:.58rem;font-weight:900;letter-spacing:.1em}.demo-request-input{min-height:104px;padding:13px 14px;border:1px solid #dce4ec;border-radius:11px;background:#fbfcfd;color:#334155;font-size:.82rem;line-height:1.6}.demo-request-input::after{content:'|';margin-left:2px;color:#eab308;animation:demo-caret 900ms steps(1) infinite}.demo-request-input.is-complete::after{display:none}.demo-request-analysis{display:none;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border-radius:8px;background:#fffbeb;color:#92400e;font-size:.59rem;font-weight:750}.demo-request-analysis.is-visible{display:flex}.demo-request-analysis i{width:7px;height:7px;border-radius:50%;background:#f59e0b}.demo-request-analysis b{margin-left:auto;color:#d97706;font-size:.55rem;letter-spacing:2px}.demo-request-submit,.demo-create-button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:15px;padding:12px 14px;border:0;border-radius:10px;background:#f59e0b;color:#17120b;font:inherit;font-size:.7rem;font-weight:900;cursor:pointer;transition:transform 240ms var(--demo-ease),background 240ms var(--demo-ease),box-shadow 240ms var(--demo-ease)}.demo-request-submit:hover,.demo-request-submit:focus-visible,.demo-create-button:hover,.demo-create-button:focus-visible{background:#fbbf24;transform:translateY(-1px);box-shadow:0 8px 18px rgba(245,158,11,.2)}.demo-request-submit b,.demo-create-button b{font-size:1rem}.demo-request-submit[hidden]{display:none}.demo-draft-panel{margin-top:14px;padding-top:14px;border-top:1px solid #e8edf2}.demo-draft-panel[hidden]{display:none}.demo-draft-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.demo-draft-panel-head strong{display:block;margin-top:4px;font-family:'Outfit',sans-serif;font-size:.85rem}.demo-draft-panel-head em{color:#16a34a;font-size:.56rem;font-style:normal;font-weight:800}.demo-draft-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.demo-draft-list article{padding:11px;border:1px solid #e4eaf0;border-radius:10px;background:#fbfcfd;opacity:0;transform:translateY(10px);transition:opacity 360ms var(--demo-ease),transform 360ms var(--demo-ease),border-color 360ms var(--demo-ease)}.demo-draft-list article.is-visible{opacity:1;transform:translateY(0)}.demo-draft-list article.is-created{border-color:#86efac;background:#f0fdf4}.demo-draft-list article>span{display:inline-block;padding:4px 6px;border-radius:5px;background:#fff7ed;color:#c2410c;font-size:.52rem;font-weight:850}.demo-draft-list article h4{margin:10px 0 5px;color:#334155;font-size:.67rem;line-height:1.3}.demo-draft-list article small{display:block;color:#94a3b8;font-size:.53rem;line-height:1.35}.demo-create-button{margin-top:12px}.demo-focus-ring{position:absolute;z-index:19;pointer-events:none;opacity:0;border:2px solid rgba(245,158,11,.9);border-radius:12px;transition:opacity 260ms var(--demo-ease),transform 420ms var(--demo-ease)}.cockpit-demo-canvas[data-demo-state="request-opening"] .demo-focus-ring{right:20px;top:43px;width:132px;height:45px;opacity:1;animation:demo-focus-pulse 1s var(--demo-ease) infinite}
@keyframes demo-new-request-pulse{50%{transform:translateY(-2px) scale(1.06)}}@keyframes demo-focus-pulse{50%{box-shadow:0 0 0 7px rgba(245,158,11,.12)}}@keyframes demo-created-task-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-calendar-in{from{opacity:0;transform:translateY(12px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}@keyframes demo-overlay-in{from{opacity:0}to{opacity:1}}@keyframes demo-dialog-in{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes demo-caret{0%,45%{opacity:1}46%,100%{opacity:0}}
@media (max-width:1000px){.demo-cockpit-bento{grid-template-columns:1fr 1fr}.demo-activity-card{grid-column:1 / -1}.demo-cockpit-sidebar{display:none}.demo-cockpit-layout{grid-template-columns:1fr}}
@media (max-width:640px){.cockpit-demo-showcase{padding:72px 0}.cockpit-demo-toolbar{align-items:flex-start;flex-direction:column}.cockpit-demo-controls{align-self:flex-end;margin-top:-32px}.cockpit-demo-canvas{min-height:700px;border-radius:18px;box-shadow:0 18px 45px rgba(15,23,42,.16),0 0 0 5px rgba(255,255,255,.72)}.demo-browser-chrome{height:27px;padding:0 9px}.demo-browser-chrome b{font-size:.5rem}.demo-cockpit-app{min-height:673px}.demo-cockpit-topbar{align-items:flex-start;flex-wrap:wrap;gap:9px;padding:13px 12px}.demo-cockpit-brand{min-width:0;flex:1}.demo-cockpit-brand strong{font-size:1.15rem}.demo-cockpit-brand small{display:none}.demo-brand-switcher{order:3;width:100%;justify-content:flex-start;overflow:auto}.demo-brand-switcher button{padding:7px 9px;font-size:.59rem}.demo-new-request{padding:8px 10px;font-size:.61rem}.demo-cockpit-main{padding:13px 10px}.demo-cockpit-heading h3{font-size:1.05rem}.demo-cockpit-date{font-size:.54rem}.demo-cockpit-metrics{gap:5px}.demo-cockpit-metrics>div{padding:9px 8px}.demo-cockpit-metrics small,.demo-cockpit-metrics em{font-size:.5rem}.demo-cockpit-metrics strong{font-size:1.05rem}.demo-cockpit-bento{grid-template-columns:1fr}.demo-activity-card{grid-column:auto}.demo-product-card{padding:12px}.demo-calendar-kpis{flex-wrap:wrap}.demo-calendar-kpis span{flex:1;min-width:calc(50% - 4px)}.demo-calendar-toolbar{align-items:flex-start;flex-direction:column}.demo-calendar-toolbar>div{flex-wrap:wrap}.demo-calendar-grid> b{min-height:37px;padding:5px 3px}.demo-calendar-grid>b small{display:none}.demo-calendar-next>b{font-size:.5rem}.demo-request-overlay{padding:11px}.demo-request-dialog{width:100%;max-height:calc(100% - 10px)}.demo-request-head,.demo-request-body{padding:15px}.demo-request-input{min-height:126px;font-size:.74rem}.demo-draft-list{grid-template-columns:1fr}.demo-draft-list article{padding:9px}.demo-draft-list article h4{margin:7px 0 4px}.demo-focus-ring{display:none}}
@media (prefers-reduced-motion:reduce){.cockpit-demo-showcase *,.cockpit-demo-showcase *::before,.cockpit-demo-showcase *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.demo-request-input::after{animation:none}.demo-new-request,.demo-focus-ring{animation:none!important}.demo-created-task{animation:none}.demo-calendar-drawer{animation:none}}

/* Passive product film: the showcase is observed, never operated. */
.cockpit-demo-canvas{pointer-events:none}
.demo-cockpit-app{transform-origin:84% 10%;transition:transform 820ms cubic-bezier(.16,1,.3,1),background 300ms var(--demo-ease)}
.cockpit-demo-canvas[data-demo-state="request-opening"] .demo-cockpit-app{transform:scale(1.045)}
.cockpit-demo-canvas[data-demo-state="typing"] .demo-cockpit-app,.cockpit-demo-canvas[data-demo-state="analyzing"] .demo-cockpit-app{transform:scale(1.095)}
.cockpit-demo-canvas[data-demo-state="drafting"] .demo-cockpit-app,.cockpit-demo-canvas[data-demo-state="creating"] .demo-cockpit-app{transform:scale(1.13)}
.demo-brand-switcher-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.04);color:#aeb8c7;font-size:.67rem;font-weight:800}.demo-brand-switcher-pill i{width:7px;height:7px;border-radius:50%;background:#cbd5e1}.demo-brand-switcher-pill[aria-pressed="true"]{border-color:rgba(234,179,8,.72);background:rgba(234,179,8,.14);color:#fff}.demo-brand-switcher-pill[aria-pressed="true"] i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.demo-new-request{cursor:default}.demo-request-overlay{animation-duration:700ms}.demo-request-dialog{animation:demo-dialog-zoom 760ms cubic-bezier(.16,1,.3,1) both}.demo-request-submit,.demo-create-button{cursor:default}.demo-calendar-close,.demo-request-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e2e8f0;border-radius:50%;color:#94a3b8;font-size:1.1rem;line-height:1}.demo-calendar-grid>b.is-muted{border-color:transparent;background:#f8fafc;color:#cbd5e1}.demo-calendar-grid>b:not(.is-muted) i{box-shadow:0 0 0 3px rgba(15,23,42,.035)}
@keyframes demo-dialog-zoom{from{opacity:0;transform:translateY(34px) scale(.72)}60%{opacity:1;transform:translateY(-3px) scale(1.025)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:640px){.demo-brand-switcher-pill{padding:7px 9px;font-size:.59rem}.demo-calendar-grid>b{min-height:42px;padding:5px 3px}.demo-calendar-grid>b small{display:block;font-size:.4rem}.demo-request-dialog{animation-name:demo-dialog-zoom}}

/* ============================================================================
   PRICING CARD REFINEMENTS (1, 2 & 4 SELECTED ENHANCEMENTS)
   ============================================================================ */

/* 1. Global Circular Checkmarks (Point 2) */
.features-list .check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(34, 197, 94, 0.14) !important;
  color: #15803d !important; /* Premium Emerald Green */
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

/* 2. Premium Spacing to Balance Height Disparity (Point 1) */
.features-list li {
  padding: 13px 0 !important; /* Premium default spacing */
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Balance heights dynamically for shorter cards (Başlangıç & Dönüşüm) */
.pricing-card:not(.featured) .features-list li {
  padding: 18px 0 !important; 
}

/* 3. Popüler (Featured) Badge Design Boost (Point 4) */
.pricing-card.featured .recommended {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: linear-gradient(135deg, #22C55E, #15803D) !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 10 !important;
}

/* 4. Sharp Premium Borders & Hover Shadow Effects (Point 4) */
.pricing-card {
  border: 1px solid rgba(28, 25, 23, 0.12) !important; /* Slightly sharper border for definition */
  box-shadow: 0 10px 30px rgba(28, 25, 23, 0.03) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.pricing-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(28, 25, 23, 0.08) !important;
  border-color: rgba(28, 25, 23, 0.22) !important;
}

/* Make the featured Gelişim card glow elegantly */
.pricing-card.featured {
  border-color: rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 15px 35px rgba(34, 197, 94, 0.06) !important;
}

.pricing-card.featured:hover {
  border-color: #22C55E !important;
  box-shadow: 0 25px 50px rgba(34, 197, 94, 0.15) !important;
}

/* 5. Premium Grey Disabled Button ("Çok Yakında") */
.pricing-card.disabled button.btn-primary,
.pricing-card button:disabled {
  background: #E2E8F0 !important; /* Premium Slate 200 light grey */
  color: #94A3B8 !important; /* Slate 400 mid grey text */
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   ULTRA-PREMIUM SaaS MULTI-STEP MODAL REFINEMENTS
   ========================================================================== */

/* 1. Modal Overlay Backdrop & Blur */
.modal-overlay {
  background: rgba(15, 23, 42, 0.45) !important; /* Soft Slate 900 overlay */
  backdrop-filter: blur(12px) !important; /* Premium rich blur */
  -webkit-backdrop-filter: blur(12px) !important;
  transition: opacity 0.3s ease !important;
}

/* 2. Modal Card Container */
.modal {
  background: #ffffff !important;
  border: 1px solid rgba(28, 25, 23, 0.08) !important;
  border-radius: 24px !important; /* Clean, bold curved edges */
  padding: 42px 36px 36px 36px !important; /* Dynamic high-end padding */
  max-width: 480px !important; /* Compact, balanced width */
  box-shadow: 
    0 24px 64px -12px rgba(28, 25, 23, 0.16), 
    0 0 1px rgba(28, 25, 23, 0.1) !important;
  overflow-y: visible !important; /* Avoid cutting off glowing focus rings */
}

/* 3. High-Speed Satisfying Close Button Rotation */
.modal-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(28, 25, 23, 0.04) !important;
  color: var(--text2) !important;
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modal-close:hover {
  background: rgba(28, 25, 23, 0.08) !important;
  color: #000000 !important;
  transform: rotate(90deg) !important; /* Satisfying hover micro-animation */
}

/* 4. Modal Header Typography */
.modal h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 850 !important;
  color: #000000 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.modal .modal-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--text2) !important; /* Crisp readable stone */
  margin-bottom: 32px !important;
  line-height: 1.5 !important;
}

/* 5. Minimalist Segmented Progress Bar (Points/Dashes) */
.modal-progress {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 36px !important;
  position: relative !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.modal-progress::before {
  display: none !important; /* Remove the connector line */
}

.progress-step {
  flex: 1 !important;
  width: auto !important;
  height: 6px !important; /* Sleek line thickness */
  border-radius: 100px !important;
  background: rgba(28, 25, 23, 0.08) !important; /* Inactive line color */
  border: none !important;
  font-size: 0 !important; /* Hide the hardcoded step number text */
  color: transparent !important;
  z-index: 2 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Current step active (warm sunset brand orange) */
.progress-step.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25) !important;
}

/* Completed step active (Emerald success green) */
.progress-step.completed {
  background: var(--success) !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
}

/* 6. High-Contrast Spacious Form Fields & Inputs */
.form-group {
  margin-bottom: 22px !important;
}

.form-group label {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #171514 !important; /* Extremely readable label */
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

.form-group label.consent-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.form-group label.consent-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  margin-top: 2px !important;
  padding: 0 !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100% !important;
  padding: 14px 18px !important; /* Spacious padding */
  border: 1px solid rgba(28, 25, 23, 0.12) !important; /* Crisp border */
  border-radius: 12px !important; /* Modern organic curve */
  font-size: 0.95rem !important;
  font-family: 'Inter', sans-serif !important;
  color: #000000 !important;
  background: #F8FAFC !important; /* Light Slate 50 background */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

/* Soft brand orange glowing focus ring */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15) !important; /* Soft brand orange ring */
}

.form-group input::placeholder {
  color: #64748B !important; /* Visible Slate 500 placeholder */
  font-weight: 450 !important;
}

.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important; /* Spacious gap */
}

/* 7. Action Buttons (Submit & Prev/Back) */
.form-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.form-actions .btn-primary,
.modal .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-actions .btn-ghost {
  flex: 1 !important;
  padding: 16px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(28, 25, 23, 0.12) !important;
  background: #ffffff !important;
  color: var(--text2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-actions .btn-ghost:hover {
  background: rgba(28, 25, 23, 0.04) !important;
  color: #000000 !important;
  border-color: rgba(28, 25, 23, 0.2) !important;
}

/* Compact success state screen padding adjustments */
#step-success {
  padding: 24px 0 12px 0 !important;
}

/* ==========================================================================
   RestoUp V4 Mobil & Premium Responsive Düzeltmeleri
   ========================================================================== */

/* 1. Global Dekoratif Okları Gizleme ve Karşılaştırma Tablosu Yatay Kaydırma */
@media (max-width: 768px) {
  .bg-arrows {
    display: none !important;
  }
  
  /* Mobilde karşılaştırmayı yatay taşan tablo yerine kartlara çevir. */
  .geo-table-wrapper {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .geo-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
  }
  .geo-table thead {
    display: none !important;
  }
  .geo-table tbody {
    display: grid !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .geo-table tr {
    display: block !important;
    padding: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.86) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--shadow) !important;
  }
  .geo-table tr:hover {
    background: #ffffff !important;
  }
  .geo-table th,
  .geo-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .geo-table td:first-child {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    color: var(--text) !important;
    font-size: 1rem !important;
    white-space: normal !important;
  }
  .geo-table td:nth-child(2),
  .geo-table td:nth-child(3) {
    padding-top: 10px !important;
    border-top: 1px solid rgba(226, 232, 240, 0.74) !important;
    color: var(--text2) !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }
  .geo-table td:nth-child(3) {
    margin-top: 10px !important;
    color: var(--text) !important;
  }
  .geo-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #C2410C;
  }
  .geo-table td:nth-child(3)::before {
    color: var(--accent);
  }
}

/* 2. Hero İstatistikleri, Form Satırları ve Dikey Yüzen Premium Modal Düzeltmeleri */
@media (max-width: 576px) {
  /* Hero stats sığdırma */
  .hero-stats {
    gap: 8px !important;
    padding: 12px 4px !important;
  }
  .hero-stat .number {
    font-size: 1.25rem !important;
  }
  .hero-stat .label {
    font-size: 0.65rem !important;
    white-space: nowrap !important;
  }

  /* Yüzen, kaydırılabilir iOS Stili Premium Modal Kartı */
  .modal-overlay {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .modal-overlay.open {
    display: flex !important;
  }
  .modal {
    max-width: calc(100% - 32px) !important;
    margin: 20px 16px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    padding: 32px 20px 24px 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Form alanlarının mobilde alt alta yığılması */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media(max-width:576px){
  .proof{padding:64px 0 !important}
  .proof .section-title{font-size:1.85rem}
  .proof .section-sub{font-size:.95rem;margin-bottom:28px !important}
  .proof-slider-container{padding:8px 14px 4px}
  .proof-slider-track{gap:12px}
  .proof-card{
    padding:18px 16px !important;
    min-width:0 !important;
    border-radius:12px;
  }
  .proof-card:hover{transform:none}
  .proof-card-header{gap:6px !important;margin-bottom:14px !important}
  .proof-restaurant{font-size:.96rem;line-height:1.2}
  .proof-city{font-size:.76rem}
  .proof-platform{font-size:.66rem;padding:4px 8px}
  .proof-metrics{gap:10px !important;margin-bottom:12px !important}
  .proof-metric .label{font-size:.7rem;line-height:1.25}
  .proof-metric .value{font-size:1.3rem !important}
  .proof-quote{margin-top:14px;padding-top:12px}
  .proof-quote p{font-size:.8rem;line-height:1.48}
  .proof-author{font-size:.74rem}
  .proof-slider-controls{gap:12px;margin-top:22px}
  .proof-btn{width:38px;height:38px}
  .proof-dots{
    min-width:72px;
    justify-content:center;
    padding:7px 12px;
    border-radius:999px;
    background:#fff;
    box-shadow:var(--shadow);
  }
  .proof-fraction-text{font-size:.84rem !important}
}

.ads-landing{min-height:100vh;background:#0d0f12;color:#f7f7f8}.ads-landing *{box-sizing:border-box}.ads-shell{width:min(1120px,calc(100% - 32px));margin:0 auto}.ads-nav{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #292d33}.ads-nav img{width:142px;height:auto}.ads-nav a{color:#fff;text-decoration:none;font-weight:750}.ads-hero{padding:56px 0 32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:48px;align-items:start}.ads-kicker{color:#ff7a1a;font-size:.78rem;font-weight:850;text-transform:uppercase}.ads-copy h1{font-size:clamp(2.25rem,5vw,4.4rem);line-height:1.02;letter-spacing:0;margin:14px 0 20px;max-width:760px}.ads-copy>p{color:#b8bec7;font-size:1.08rem;line-height:1.7;max-width:690px}.ads-points{display:grid;gap:12px;margin:28px 0;padding:0;list-style:none}.ads-points li{display:flex;gap:10px;align-items:flex-start;color:#e8eaed}.ads-points li:before{content:'✓';color:#22c55e;font-weight:900}.ads-actions{display:flex;gap:12px;flex-wrap:wrap}.ads-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid #41464f;border-radius:6px;color:#fff;text-decoration:none;font-weight:800}.ads-action.primary{background:#ff6b00;border-color:#ff6b00;color:#111}.ads-form{background:#15181d;border:1px solid #30343b;border-radius:8px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.ads-form h2{font-size:1.35rem;letter-spacing:0;margin:0 0 6px}.ads-form>p{color:#aeb4bd;margin:0 0 18px;font-size:.9rem}.ads-field{display:grid;gap:7px;margin-bottom:13px}.ads-field label,.ads-platforms legend{font-size:.75rem;font-weight:800;color:#d6d9de}.ads-field input,.ads-field select,.ads-field textarea{width:100%;border:1px solid #3a3f47;background:#0f1115;color:#fff;border-radius:5px;padding:11px 12px;font:inherit}.ads-field textarea{min-height:82px;resize:vertical}.ads-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ads-platforms{border:0;padding:0;margin:0 0 14px}.ads-platform-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.ads-platform-options label{background:#0f1115;border:1px solid #30343b;border-radius:5px;padding:9px;font-size:.76rem}.ads-consent{display:flex;gap:9px;font-size:.7rem;line-height:1.45;color:#aeb4bd;margin:14px 0}.ads-consent a{color:#fff}.ads-submit{width:100%;min-height:46px;border:0;border-radius:5px;background:#ff6b00;color:#111;font-weight:900;cursor:pointer}.ads-submit:disabled{opacity:.55}.ads-form-message{min-height:20px;margin-top:11px;font-size:.78rem;line-height:1.45}.ads-form-message[data-type=error]{color:#fca5a5}.ads-form-message[data-type=success]{color:#86efac}.ads-band{border-top:1px solid #292d33;padding:32px 0 48px}.ads-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.ads-band h3{font-size:1rem;letter-spacing:0;margin:0 0 7px}.ads-band p{font-size:.86rem;line-height:1.55;color:#aeb4bd;margin:0}.ads-disclaimer{border-top:1px solid #292d33;padding:18px 0 30px;color:#858b94;font-size:.7rem;line-height:1.5}@media(max-width:820px){.ads-hero{grid-template-columns:1fr;padding-top:36px}.ads-grid,.ads-band-grid{grid-template-columns:1fr}.ads-copy h1{font-size:2.55rem}.ads-nav{height:62px}.ads-nav a{font-size:.78rem}}
body.ads-landing{--bg:#0d0f12;--bg2:#15181d;--text:#f7f7f8;--text2:#b8bec7;background:#0d0f12!important;color:#f7f7f8!important}
body.ads-main-style{--bg:#F5F5F4;--bg2:#F5F5F4;--card:#FFFDFB;--text:#0C0A09;--text2:#292524;--text3:#44403C;--border:#E7E5E4;--accent:#FF6B00;--accent2:#FF8A3D;--accent-bg:rgba(255,107,0,.1);--shadow:0 4px 18px rgba(28,25,23,.06);--shadow-lg:0 16px 40px rgba(28,25,23,.1);background:#F5F5F4!important;color:#0C0A09!important}
body.ads-main-style .ads-hero-main .container{align-items:start}body.ads-main-style .ads-hero-main .hero-content{padding-top:46px}body.ads-main-style .ads-inline-form-shell{width:100%;max-width:520px;margin:0;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}body.ads-main-style .ads-inline-form-shell .form-group input,body.ads-main-style .ads-inline-form-shell .form-group select,body.ads-main-style .ads-inline-form-shell .form-group textarea{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm)}body.ads-main-style .ads-inline-form-shell .form-group input::placeholder,body.ads-main-style .ads-inline-form-shell .form-group textarea::placeholder{color:var(--text3);opacity:.75}body.ads-main-style .ads-inline-form-shell .form-group input:focus,body.ads-main-style .ads-inline-form-shell .form-group select:focus,body.ads-main-style .ads-inline-form-shell .form-group textarea:focus{border-color:var(--accent);outline:2px solid rgba(255,107,0,.16)}body.ads-main-style .ads-inline-form-shell .form-platform-link-field{display:none}body.ads-main-style .ads-inline-form-shell .form-divider-label{color:var(--text2);font-weight:700}body.ads-main-style .ads-inline-form-shell .form-platform-options label{background:var(--bg2);border-color:var(--border);color:var(--text2)}body.ads-main-style .ads-inline-form-shell .consent-check{color:var(--text2)}body.ads-main-style .ads-inline-form-shell .consent-check a{color:var(--accent)}body.ads-main-style .ads-inline-form-shell .form-step h3{color:var(--text)}body.ads-main-style .ads-inline-form-shell .form-step p{color:var(--text2)}
@media(max-width:900px){body.ads-main-style .ads-hero-main .hero-content{padding-top:0}body.ads-main-style .ads-inline-form-shell{margin-top:22px}}
@media(max-width:600px){body.ads-main-style .ads-inline-form-shell{padding:24px 20px}body.ads-main-style .ads-main-style .hero h1{font-size:3rem}}
.ads-main-style{background:var(--bg)!important;color:var(--text)!important}.ads-main-style .ads-hero-main{min-height:calc(100vh - 70px);padding-top:132px;padding-bottom:90px}.ads-main-style .ads-hero-main .container{position:relative;z-index:2}.ads-main-style .ads-form-main{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg);color:var(--text);align-self:center}.ads-main-style .form-panel-heading{border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:18px}.ads-main-style .form-panel-heading .section-label{margin-bottom:9px}.ads-main-style .form-panel-heading h2{font-size:1.45rem;line-height:1.2;margin:0 0 8px;color:var(--text)}.ads-main-style .form-panel-heading p{font-size:.86rem;color:var(--text2);line-height:1.45;margin:0}.ads-main-style .ads-field{gap:6px;margin-bottom:12px}.ads-main-style .ads-field label,.ads-main-style .ads-platforms legend{font-size:.72rem;color:var(--text2);font-weight:750}.ads-main-style .ads-field label span{font-weight:500;color:var(--text3)}.ads-main-style .ads-field input,.ads-main-style .ads-field select,.ads-main-style .ads-field textarea{border:1px solid var(--border);background:var(--bg2);color:var(--text);border-radius:var(--radius-sm);padding:10px 11px;font-size:.86rem}.ads-main-style .ads-field input:focus,.ads-main-style .ads-field select:focus,.ads-main-style .ads-field textarea:focus{outline:2px solid rgba(255,107,0,.2);border-color:var(--accent)}.ads-main-style .ads-platforms{border:0;padding:0;margin:0 0 12px}.ads-main-style .ads-platform-options{gap:7px;margin-top:7px}.ads-main-style .ads-platform-options label{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;font-size:.72rem;color:var(--text2)}.ads-main-style .ads-consent{color:var(--text3);font-size:.68rem}.ads-main-style .ads-consent a{color:var(--accent)}.ads-main-style .ads-submit{width:100%;justify-content:center;margin-top:3px}.ads-main-style .ads-form-message{min-height:18px}.ads-main-section{padding:96px 0;background:var(--bg2);border-top:1px solid var(--border)}.ads-main-section .section-label,.ads-main-section .section-title,.ads-main-section .section-sub{text-align:center;margin-left:auto;margin-right:auto}.ads-main-section .section-title{max-width:720px}.ads-main-section .section-sub{max-width:650px;margin-bottom:42px}.ads-main-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ads-main-cards article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}.ads-main-cards article>span{color:var(--accent);font-family:'Outfit',sans-serif;font-weight:800}.ads-main-cards h3{font-size:1.05rem;margin:18px 0 8px}.ads-main-cards p{color:var(--text2);font-size:.88rem;line-height:1.55;margin:0}.ads-main-style .ads-honeypot{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}.ads-main-style .footer{background:var(--bg);color:var(--text)}@media(max-width:900px){.ads-main-style .ads-hero-main{padding-top:112px}.ads-main-cards{grid-template-columns:1fr}.ads-main-style .ads-form-main{margin-top:22px}}@media(max-width:600px){.ads-main-style .ads-hero-main{padding:104px 0 56px}.ads-main-style .ads-hero-main .container{gap:28px}.ads-main-style .ads-form-main{padding:22px 18px}.ads-main-style .hero h1{font-size:3rem}.ads-main-style .hero-sub{font-size:1.08rem}.ads-main-style .hero-ctas{flex-wrap:wrap}.ads-main-style .hero-ctas a{flex:1;min-width:145px}.ads-main-style .ads-grid{grid-template-columns:1fr}}
.ads-proof-link{text-align:center;margin:-18px auto 42px}.ads-proof-link a{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:800;text-decoration:none}.ads-proof-link a:hover{text-decoration:underline}.ads-proof-link span{font-size:1.05em}

/* Ads landing proof block */
.ads-hero-proof{max-width:620px;margin:0 0 26px}
.ads-hero-proof-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ads-hero-proof-kicker{color:var(--accent);font-size:.7rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.ads-hero-proof-link{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:.84rem;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(255,107,0,.35);padding-bottom:2px}
.ads-hero-proof-link:hover{border-color:var(--accent)}
.ads-hero-proof-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.ads-hero-proof-title{margin:0 0 14px;color:var(--text2);font-size:.95rem;font-weight:650;line-height:1.45}
.ads-proof-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ads-proof-card{min-height:144px;padding:14px 13px 15px;background:rgba(255,253,251,.78);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.ads-proof-card-index{display:block;color:var(--accent);font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:850;line-height:1}
.ads-proof-card h3{margin:14px 0 7px;color:var(--text);font-size:.82rem;line-height:1.2}
.ads-proof-card p{margin:0;color:var(--text2);font-size:.74rem;line-height:1.45}
.ads-main-style .hero-sub{margin-bottom:24px}
.ads-main-style .hero-ctas{margin-bottom:30px}
.hero-ctas a[href*="assets/brochure/restoup-tanitim-ve-basarilar.pdf"]{flex:0 0 auto!important;width:auto!important;min-width:0!important;padding:7px 10px!important;border:0!important;border-bottom:1px solid rgba(255,107,0,.35)!important;border-radius:0!important;background:transparent!important;color:var(--accent)!important;font-size:.84rem!important;font-weight:800!important;box-shadow:none!important;gap:6px!important;text-decoration:none!important;transition:.2s}
.hero-ctas a[href*="assets/brochure/restoup-tanitim-ve-basarilar.pdf"]:hover{border-bottom-color:var(--accent)!important;background:transparent!important;color:var(--accent2)!important;transform:translateY(-1px)}
@media(max-width:900px){
  .ads-hero-proof{max-width:none}
  .ads-proof-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .ads-hero-proof-head{align-items:flex-start;flex-direction:column;gap:7px}
  .ads-proof-cards{grid-template-columns:1fr;gap:9px}
  .ads-proof-card{min-height:0;padding:13px 14px}
  .ads-proof-card h3{margin-top:10px}
  .ads-main-style .hero-stats{gap:10px}
  .ads-main-style .hero-stat .number{font-size:1.18rem;white-space:nowrap}
  .ads-main-style .hero-stat .label{font-size:.66rem;line-height:1.3;text-transform:none;letter-spacing:0}
}

/* Landing copy of the real subscriber Cockpit. Kept scoped so the product UI is untouched. */
.cockpit-demo-showcase{position:relative;overflow:hidden;background:#eef2f6;color:#0f172a}.cockpit-demo-showcase .cockpit-demo-toolbar{display:flex;justify-content:flex-end;max-width:1440px;margin:0 auto 12px;padding:0 20px}.cockpit-demo-status{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(15,23,42,.1);border-radius:999px;background:#fff;color:#64748b;font-size:.7rem;font-weight:750}.cockpit-demo-status i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.cockpit-demo-showcase .cockpit-demo-canvas{position:relative;isolation:isolate;min-height:820px;overflow:hidden;background:radial-gradient(circle at 50% 0,#18202c 0,#0f1115 54%,#0b0d10 100%);border:1px solid rgba(15,23,42,.5);border-radius:24px;box-shadow:0 28px 70px rgba(15,23,42,.22),0 0 0 6px rgba(255,255,255,.8);pointer-events:none}.cockpit-demo-stage{position:relative;min-height:820px;transform-origin:50% 9%;transition:transform 460ms cubic-bezier(.22,1,.36,1),opacity 300ms ease}
.cockpit-demo-showcase .cc-dash{position:relative;max-width:none;min-height:820px;margin:0;padding:24px 28px 34px;background:radial-gradient(circle at top,#0f1115 0,#0c0d10 64%);font-family:'Inter',system-ui,sans-serif;color:#f8fafc}.cockpit-demo-showcase .cc-tool-header{display:grid;grid-template-columns:minmax(250px,1.15fr) minmax(270px,1fr) auto;align-items:center;gap:20px;padding:10px 2px 22px;border-bottom:1px solid rgba(255,255,255,.08)}.cc-tool-header__brand{display:flex;align-items:center;gap:16px;min-width:0}.cc-tool-header__brand>strong{font-family:'Outfit',sans-serif;font-size:1.8rem;letter-spacing:-.06em;color:#fff}.cc-tool-header__brand>strong span{color:#eab308}.cc-tool-header__brand>span{padding-left:16px;border-left:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.66);font-size:.78rem;white-space:nowrap}.cc-tool-header__brand b{color:#fff}.cc-brand-rail{display:flex;justify-content:center;gap:7px}.cc-brand-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.58);font-size:.67rem;font-weight:800}.cc-brand-pill.is-active{border-color:rgba(234,179,8,.55);background:rgba(234,179,8,.12);color:#facc15}.cc-brand-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e}.cc-brand-pill:not(.is-active) i{background:#64748b}.cc-header-quota{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.42);font-size:.56rem;font-weight:800;letter-spacing:.08em;white-space:nowrap}.cc-header-quota i{width:6px;height:6px;border-radius:50%;background:#eab308;box-shadow:0 0 7px rgba(234,179,8,.5)}
.cockpit-demo-showcase .cc-bento{display:grid;grid-template-columns:260px minmax(0,1fr) 290px;gap:0;margin-top:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.025)}.cockpit-demo-showcase .cc-bento>*{min-width:0;padding:20px 22px}.cockpit-demo-showcase .cc-bento>*:not(:last-child){border-right:1px solid rgba(255,255,255,.08)}.cockpit-demo-showcase .cc-card{display:flex;min-width:0;flex-direction:column;background:transparent}.cc-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:64px;padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,.08)}.cc-card__eyebrow{display:block;margin-bottom:5px;color:rgba(255,255,255,.4);font-size:.54rem;font-weight:850;letter-spacing:.11em}.cc-card__title{margin:0;color:#fff;font-family:'Outfit',sans-serif;font-size:1.05rem;line-height:1.2}.cc-card__title sup{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:3px;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:rgba(255,255,255,.55);font-size:.52rem}.cc-card__sub{display:block;margin-top:5px;color:rgba(255,255,255,.42);font-size:.65rem}.cc-card__note,.cc-card__link{color:#facc15;font-size:.55rem;font-weight:850;letter-spacing:.05em;white-space:nowrap}.cc-card__link{color:#94a3b8}.cc-card__body{min-height:0;padding-top:16px}.cc-card--automations,.cc-card--tasks{min-height:436px}.cc-right-stack{display:grid;grid-template-rows:auto 1fr;gap:18px;min-width:0;padding:0}.cc-right-stack>.cc-card{padding:20px 22px}.cc-card--activity{border-top:1px solid rgba(255,255,255,.08)}
.customer-recurring-card{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}.customer-recurring-top{display:flex;align-items:center;gap:9px}.customer-recurring-icon{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(234,179,8,.28);border-radius:9px;color:#facc15}.customer-recurring-title{min-width:0}.customer-recurring-title strong,.customer-recurring-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-recurring-title strong{color:#e2e8f0;font-size:.68rem}.customer-recurring-meta{margin-top:3px;color:rgba(255,255,255,.42);font-size:.56rem}.customer-recurring-progress{height:4px;margin:10px 0 6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.customer-recurring-progress i{display:block;height:100%;border-radius:inherit;background:#eab308}.customer-recurring-foot{display:flex;justify-content:space-between;color:rgba(255,255,255,.44);font-size:.56rem}.customer-recurring-state{color:#facc15;font-weight:800}.cc-separate-note{margin:16px 0 0;color:rgba(255,255,255,.42);font-size:.61rem;line-height:1.45}.cc-automation-calendar-action{margin-top:auto;padding-top:15px}.cc-work-calendar-button{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;border:1px solid rgba(234,179,8,.27);border-radius:11px;background:rgba(234,179,8,.08)}.cc-work-calendar-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#eab308;color:#111827}.cc-work-calendar-button-text,.cc-work-calendar-button-note{display:block}.cc-work-calendar-button-text{color:#f8fafc;font-size:.64rem;font-weight:850}.cc-work-calendar-button-note{margin-top:3px;color:rgba(255,255,255,.42);font-size:.53rem}
.cc-task-head-actions{display:flex;align-items:center;gap:9px}.cc-quota-label{color:rgba(255,255,255,.4);font-size:.54rem;font-weight:800}.cc-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-weight:850}.cc-btn--sm{padding:8px 10px;font-size:.6rem}.cc-btn--primary{background:#eab308;color:#111827}.customer-task-list{display:grid;gap:8px}.customer-task-card-wrapper[hidden],.cockpit-demo-showcase [hidden]{display:none!important}.customer-task-card{border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.045);overflow:hidden}.customer-task-card.stage-done{border-color:rgba(34,197,94,.25)}.customer-task-card.stage-created{border-color:rgba(234,179,8,.52);background:rgba(234,179,8,.1);animation:showcase-created-task-in 450ms both}.customer-task-toggle{padding:11px 12px}.customer-task-preview-top{display:flex;align-items:center;gap:9px;min-width:0}.customer-task-type-icon{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;background:rgba(234,179,8,.14);color:#facc15}.customer-task-preview-top>div{min-width:0;flex:1}.customer-task-preview-top h3{margin:0;overflow:hidden;color:#f8fafc;font-family:'Outfit',sans-serif;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.customer-task-status{display:block;margin-top:3px;color:#facc15;font-size:.55rem;font-weight:800}.stage-done .customer-task-status{color:#4ade80}.customer-task-open-label{color:#facc15;font-size:.57rem}.customer-task-preview-mid{display:flex;gap:8px;margin:9px 0 0 35px;color:rgba(255,255,255,.42);font-size:.52rem}.customer-task-preview-mid span+span:before{content:'·';margin-right:8px;color:rgba(255,255,255,.25)}.customer-stage-preview{display:flex;align-items:center;gap:0;margin:11px 0 0 35px}.customer-stage-preview span{position:relative;display:flex;align-items:center;gap:4px;color:rgba(255,255,255,.3);font-size:.49rem}.customer-stage-preview span+span{margin-left:15px}.customer-stage-preview span+span:before{content:'';position:absolute;left:-13px;width:11px;border-top:1px solid rgba(255,255,255,.14)}.customer-stage-preview i{width:6px;height:6px;border:1px solid rgba(255,255,255,.27);border-radius:50%}.customer-stage-preview .done i,.customer-stage-preview .active i{background:#22c55e;border-color:#22c55e}.customer-stage-preview .active i{background:#eab308;border-color:#eab308;box-shadow:0 0 0 3px rgba(234,179,8,.14)}.customer-stage-preview b{font-weight:750}
.cc-file-card,.customer-notification-item{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.cc-file-card>span{color:#facc15}.cc-file-card>div,.customer-notification-item>div{min-width:0;flex:1}.cc-file-card strong,.cc-file-card small,.customer-notification-item strong,.customer-notification-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-file-card strong,.customer-notification-item strong{color:#e2e8f0;font-size:.6rem}.cc-file-card small,.customer-notification-item small{margin-top:3px;color:rgba(255,255,255,.4);font-size:.52rem}.customer-notification-item>i{width:6px;height:6px;flex:none;border-radius:50%;background:#22c55e}.customer-notification-item.is-new{background:rgba(234,179,8,.1);border-radius:8px;padding-left:8px;animation:showcase-activity-in 450ms both}
.demo-request-overlay,.customer-work-calendar-modal{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(6,9,14,.72);backdrop-filter:blur(5px)}.demo-request-overlay[hidden],.customer-work-calendar-modal[hidden]{display:none!important}.customer-task-modal-backdrop,.customer-work-calendar-backdrop{position:absolute;inset:0}.customer-task-modal-dialog{position:relative;z-index:1;width:min(760px,100%);max-height:calc(100% - 10px);overflow:hidden;border:1px solid rgba(234,179,8,.35);border-radius:20px;background:#fffaf2;color:#0f172a;box-shadow:0 30px 90px rgba(0,0,0,.5);animation:showcase-dialog-in 450ms cubic-bezier(.22,1,.36,1) both}.cai-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px;background:linear-gradient(135deg,#0a0c10,#151b24);color:#fff}.cai-head-left{display:flex;align-items:center;gap:11px;min-width:0}.cai-head-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(234,179,8,.3);border-radius:11px;color:#facc15}.cai-title{margin:0;font-family:'Outfit',sans-serif;font-size:1.15rem}.cai-experimental-note{margin:3px 0 0;color:rgba(255,255,255,.5);font-size:.63rem}.cai-mode-switch{display:flex;gap:4px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:9px}.cai-mode-btn{padding:6px 8px;color:rgba(255,255,255,.5);font-size:.58rem;font-weight:800}.cai-mode-btn--active{border-radius:6px;background:rgba(234,179,8,.14);color:#facc15}.customer-ai-request-modal-content{display:grid;grid-template-columns:1fr;max-height:640px;overflow:hidden}.cai-entry-shell{padding:18px 20px 20px}.demo-request-brand{display:flex;align-items:center;gap:9px;margin-bottom:15px}.cc-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eab308;color:#111827;font-weight:900}.demo-request-brand strong,.demo-request-brand small{display:block}.demo-request-brand strong{font-size:.7rem}.demo-request-brand small{color:#94a3b8;font-size:.55rem}.demo-assistant-ready{margin-left:auto;color:#16a34a;font-size:.57rem;font-weight:800}.demo-request-body label{display:block;margin:0 0 6px;color:#64748b;font-size:.57rem;font-weight:900;letter-spacing:.09em}.demo-request-input{min-height:93px;padding:12px;border:1px solid #d7dee6;border-radius:11px;background:#fff;color:#475569;font-size:.75rem;font-weight:650;line-height:1.55}.demo-request-input:after{content:'|';margin-left:2px;color:#eab308;animation:showcase-caret 800ms steps(1) infinite}.demo-request-input.is-complete:after{display:none}.demo-request-analysis{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border-radius:9px;background:#fff7ed;color:#a16207;font-size:.6rem;font-weight:800;opacity:0;transform:translateY(5px);transition:opacity 220ms ease,transform 220ms ease}.demo-request-analysis.is-visible{opacity:1;transform:translateY(0)}.demo-request-submit,.demo-create-button{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:11px 13px;border-radius:9px;background:#eab308;color:#111827;font-size:.65rem;font-weight:900}.demo-draft-panel{padding:0 20px 20px;border-top:1px solid #f1e5cd}.demo-draft-panel-head{display:flex;justify-content:space-between;gap:12px;padding:15px 0 10px}.demo-draft-panel-head span,.demo-draft-panel-head strong{display:block}.demo-draft-panel-head span{color:#a16207;font-size:.54rem;font-weight:900}.demo-draft-panel-head strong{margin-top:3px;color:#172033;font-family:'Outfit',sans-serif;font-size:.85rem}.demo-draft-panel-head em{color:#16a34a;font-size:.56rem;font-style:normal;font-weight:850}.demo-draft-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.demo-draft-card{min-width:0;padding:10px;border:1px solid #eadfca;border-radius:10px;background:#fff;opacity:0;transition:opacity 180ms ease-out}.demo-draft-card.is-visible{opacity:1}.demo-draft-card.is-created{border-color:#eab308;background:#fff7d6}.demo-draft-card>span{color:#b45309;font-size:.52rem;font-weight:900}.demo-draft-card h4{margin:6px 0 4px;color:#172033;font-family:'Outfit',sans-serif;font-size:.66rem;line-height:1.25}.demo-draft-card small{display:block;color:#64748b;font-size:.52rem;line-height:1.35}
.customer-work-calendar-modal{padding:18px}.customer-work-calendar-dialog{position:relative;z-index:1;display:flex;width:100%;height:100%;max-height:100%;min-height:0;flex-direction:column;padding:14px;border:1px solid #d7dee6;border-radius:18px;background:#fff;color:#0f172a;box-shadow:0 26px 80px rgba(0,0,0,.45);animation:showcase-calendar-in 480ms both}.customer-work-calendar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:3px 3px 12px;border-bottom:1px solid #e6ebf0}.customer-work-calendar-title{margin:0;color:#172033;font-family:'Outfit',sans-serif;font-size:1rem}.customer-work-calendar-subtitle{margin:4px 0 0;color:#64748b;font-size:.6rem}.customer-work-calendar-controls{display:flex;align-items:center;gap:7px}.customer-work-calendar-month-label,.customer-work-calendar-today-btn,.customer-calendar-brand-filter{padding:6px 9px;border:1px solid #e2e8f0;border-radius:7px;color:#475569;font-size:.56rem;font-weight:800}.customer-work-calendar-today-btn{background:#fff7ed;color:#b45309}.customer-work-calendar-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px 0 8px}.customer-work-calendar-kpi-card{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid #eef2f5;border-radius:9px;background:#f8fafc;color:#64748b;font-size:.56rem;font-weight:750}.customer-work-calendar-kpi-card b{font-family:'Outfit',sans-serif;font-size:.9rem}.customer-work-calendar-kpi-card.planned b{color:#0284c7}.customer-work-calendar-kpi-card.created b{color:#d97706}.customer-work-calendar-kpi-card.completed b{color:#059669}.customer-work-calendar-kpi-card.remaining b{color:#ea580c}.customer-work-calendar-summary-line{margin:0 0 9px;color:#64748b;font-size:.58rem}.customer-work-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.customer-work-calendar-legend{display:flex;gap:9px}.customer-work-calendar-legend span{display:inline-flex;align-items:center;gap:4px;color:#64748b;font-size:.53rem}.customer-work-calendar-dot{width:6px;height:6px;border-radius:50%}.customer-work-calendar-dot.planned,.customer-work-calendar-chip.planned .customer-work-calendar-chip-dot,.customer-work-calendar-day-meta-dot.planned{background:#0ea5e9}.customer-work-calendar-dot.created,.customer-work-calendar-chip.created .customer-work-calendar-chip-dot,.customer-work-calendar-day-meta-dot.created{background:#f59e0b}.customer-work-calendar-dot.completed,.customer-work-calendar-chip.completed .customer-work-calendar-chip-dot,.customer-work-calendar-day-meta-dot.completed{background:#22c55e}.customer-work-calendar-body{display:grid;grid-template-columns:minmax(0,1fr) 185px;gap:10px;min-height:0;flex:1}.customer-work-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto repeat(6,minmax(0,1fr));gap:4px;height:100%;min-height:0}.customer-work-calendar-weekday{padding:4px 2px;text-align:center;color:#94a3b8;font-size:.5rem;font-weight:850}.customer-work-calendar-day{display:flex;min-width:0;min-height:55px;flex-direction:column;padding:5px;border:1px solid #dce4eb;border-radius:9px;background:#fff;overflow:hidden}.customer-work-calendar-day.is-empty{border-color:#f2f4f6;background:#fafbfc}.customer-work-calendar-day.is-today{border-color:#f59e0b;background:#fffbeb}.customer-work-calendar-day-head{display:flex;justify-content:space-between;min-height:14px}.customer-work-calendar-day-number{display:flex;align-items:center;gap:4px}.customer-work-calendar-day-num{color:#475569;font-size:.59rem;font-weight:850}.customer-work-calendar-today-pill{padding:2px 4px;border-radius:4px;background:#f59e0b;color:#fff;font-size:.39rem;font-weight:850}.customer-work-calendar-stack{display:grid;gap:2px;margin-top:4px;min-width:0}.customer-work-calendar-chip{display:grid;grid-template-columns:3px minmax(0,1fr);gap:4px;align-items:center;min-width:0;padding:2px 0;color:#475569;font-size:.47rem;line-height:1.1}.customer-work-calendar-chip-dot{width:3px;height:11px;border-radius:3px}.customer-work-calendar-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-work-calendar-more{color:#94a3b8;font-size:.46rem;font-weight:850}.customer-work-calendar-day-meta{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:auto;padding-top:3px;border-top:1px solid #f0f3f5}.customer-work-calendar-day-meta-count{display:flex;align-items:baseline;gap:2px;color:#94a3b8;font-size:.43rem}.customer-work-calendar-day-meta-count b{color:#475569;font-size:.57rem}.customer-work-calendar-day-meta-dots{display:flex;gap:2px}.customer-work-calendar-day-meta-dot{width:4px;height:4px;border-radius:50%}.customer-work-calendar-detail{padding:12px;border:1px solid #e6ebf0;border-radius:11px;background:#f8fafc}.customer-work-calendar-detail-label{display:block;color:#94a3b8;font-size:.48rem;font-weight:900}.customer-work-calendar-detail strong{display:block;margin-top:8px;color:#172033;font-family:'Outfit',sans-serif;font-size:.7rem}.customer-work-calendar-detail p{margin:8px 0;color:#64748b;font-size:.56rem;line-height:1.45}.customer-work-calendar-detail-status{color:#b45309;font-size:.54rem;font-weight:850}
@keyframes showcase-overlay-in{from{opacity:0}to{opacity:1}}@keyframes showcase-dialog-in{from{opacity:0;transform:scale(.9) translateY(15px)}to{opacity:1;transform:none}}@keyframes showcase-calendar-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes showcase-created-task-in{from{opacity:0}to{opacity:1}}@keyframes showcase-activity-in{from{opacity:.25;transform:translateX(-5px)}to{opacity:1;transform:none}}@keyframes showcase-caret{0%,45%{opacity:1}46%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cockpit-demo-stage{transition:none!important;transform:none!important}.cockpit-demo-showcase *,.cockpit-demo-showcase *::before,.cockpit-demo-showcase *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.demo-request-input:after{display:none}}

/* Live Cockpit reference pass: the showcase uses the same product surfaces, not a separate dashboard style. */
.cockpit-demo-showcase .cockpit-demo-canvas{min-height:760px;border-radius:16px;background:#090b0f;border-color:#202733;box-shadow:0 24px 70px rgba(15,23,42,.2),0 0 0 5px rgba(255,255,255,.75)}
.cockpit-demo-showcase .cockpit-demo-stage,.cockpit-demo-showcase .cc-dash{min-height:760px}
.cockpit-demo-showcase .cc-dash{padding:18px 24px 24px;background:radial-gradient(circle at 50% -20%,#27303b 0,#11151b 37%,#090b0f 100%)}
.cockpit-demo-showcase .cc-tool-header{grid-template-columns:minmax(245px,1fr) minmax(260px,1.1fr) auto;gap:18px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.cockpit-demo-showcase .cc-tool-header__brand{gap:13px}.cc-tool-logo{width:56px;height:56px;object-fit:contain;border-radius:10px;flex-shrink:0}.cockpit-demo-showcase .cc-tool-header__brand>span{padding-left:13px;font-size:.67rem}
.cockpit-demo-showcase .cc-brief-ticker{min-width:0;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.045);color:#cbd5e1;font-size:.57rem;line-height:1.35;text-align:center}.cockpit-demo-showcase .cc-brief-ticker__item{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cockpit-demo-showcase .cc-header-actions{display:flex;align-items:center;gap:12px;color:#b8c1cc;font-size:.58rem;font-weight:800;white-space:nowrap}.cockpit-demo-showcase .cc-header-actions span+span{padding-left:12px;border-left:1px solid rgba(255,255,255,.12);color:#facc15}
.cockpit-demo-showcase .cc-bento{grid-template-columns:270px minmax(0,1fr) 320px;gap:10px;margin-top:14px;overflow:visible;border:0;border-radius:0;background:transparent}.cockpit-demo-showcase .cc-bento>*{padding:16px 15px;border:1px solid rgba(255,255,255,.12)!important;border-radius:11px;background:rgba(255,255,255,.035)}.cockpit-demo-showcase .cc-bento>.cc-card--tasks{background:rgba(255,255,255,.025)}.cockpit-demo-showcase .cc-bento>.cc-right-stack{padding:0;border:0!important;background:transparent}.cockpit-demo-showcase .cc-card__head{min-height:43px;padding-bottom:10px;border-bottom-color:rgba(255,255,255,.1)}.cockpit-demo-showcase .cc-card__title{font-size:.86rem}.cockpit-demo-showcase .cc-card__eyebrow{font-size:.47rem}.cockpit-demo-showcase .cc-card__sub{font-size:.56rem}.cockpit-demo-showcase .cc-card--automations,.cockpit-demo-showcase .cc-card--tasks{min-height:492px}.cockpit-demo-showcase .cc-right-stack{grid-template-rows:auto 1fr;gap:10px}.cockpit-demo-showcase .cc-right-stack>.cc-card{padding:16px 15px;border:1px solid rgba(255,255,255,.12)!important;border-radius:11px}.cockpit-demo-showcase .cc-card--activity{border-top:1px solid rgba(255,255,255,.12)}
.cockpit-demo-showcase .cc-task-head-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}.cockpit-demo-showcase .cc-brand-rail{order:2;justify-content:flex-end;width:100%}.cockpit-demo-showcase .cc-brand-pill{padding:4px 7px;border-radius:6px;font-size:.5rem}.cockpit-demo-showcase .cc-brand-pill i{width:5px;height:5px}.cockpit-demo-showcase .cc-quota-label{order:1;font-size:.45rem}.cockpit-demo-showcase .cc-btn--sm{order:0;padding:7px 8px;font-size:.53rem}
.cockpit-demo-showcase .customer-recurring-card{padding:9px;border:1px solid #eadfd0;border-radius:9px;background:#fffaf2;box-shadow:0 3px 9px rgba(15,23,42,.06)}.cockpit-demo-showcase .customer-recurring-card+.customer-recurring-card{margin-top:8px}.cockpit-demo-showcase .customer-recurring-icon{width:24px;height:24px;border-color:#fed7aa;background:#fff7ed;color:#ea580c}.cockpit-demo-showcase .customer-recurring-title strong{color:#1e293b;font-size:.58rem}.cockpit-demo-showcase .customer-recurring-meta{color:#64748b;font-size:.49rem}.cockpit-demo-showcase .customer-recurring-progress{height:3px;margin:8px 0 5px;background:#e5e7eb}.cockpit-demo-showcase .customer-recurring-progress i{background:#22c55e}.cockpit-demo-showcase .customer-recurring-foot{color:#64748b;font-size:.49rem}.cockpit-demo-showcase .customer-recurring-state{color:#ea580c}.cockpit-demo-showcase .cc-separate-note{margin:11px 1px 0;color:#94a3b8;font-size:.51rem}.cockpit-demo-showcase .cc-work-calendar-button{padding:9px;border-color:#eadfd0;border-radius:9px;background:#fffaf2}.cockpit-demo-showcase .cc-work-calendar-icon{width:25px;height:25px;background:#fff7ed;color:#ea580c}.cockpit-demo-showcase .cc-work-calendar-button-text{color:#334155;font-size:.57rem}.cockpit-demo-showcase .cc-work-calendar-button-note{color:#94a3b8;font-size:.48rem}
.cockpit-demo-showcase .customer-task-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cockpit-demo-showcase .customer-task-card-wrapper{min-width:0}.cockpit-demo-showcase .customer-task-card{border-color:#eadfd0;border-radius:9px;background:#fffaf2;box-shadow:0 3px 9px rgba(15,23,42,.06)}.cockpit-demo-showcase .customer-task-card.stage-done{border-color:#bbf7d0;background:#f8fff9}.cockpit-demo-showcase .customer-task-card.stage-created{border-color:#f59e0b;background:#fff7ed}.cockpit-demo-showcase .customer-task-toggle{padding:9px}.cockpit-demo-showcase .customer-task-type-icon{width:23px;height:23px;border-radius:7px;background:#fff7ed;color:#ea580c}.cockpit-demo-showcase .customer-task-preview-top h3{color:#1e293b;font-size:.57rem}.cockpit-demo-showcase .customer-task-status{color:#ea580c;font-size:.48rem}.cockpit-demo-showcase .stage-done .customer-task-status{color:#16a34a}.cockpit-demo-showcase .customer-task-open-label{color:#ea580c;font-size:.49rem}.cockpit-demo-showcase .customer-task-preview-mid{margin-left:32px;color:#64748b;font-size:.45rem}.cockpit-demo-showcase .customer-stage-preview{margin-left:32px}.cockpit-demo-showcase .customer-stage-preview span{color:#94a3b8;font-size:.41rem}.cockpit-demo-showcase .customer-stage-preview span+span:before{border-color:#d7dee6}.cockpit-demo-showcase .customer-stage-preview i{border-color:#cbd5e1}.cockpit-demo-showcase .customer-stage-preview .done i{background:#22c55e;border-color:#22c55e}.cockpit-demo-showcase .customer-stage-preview .active i{background:#f59e0b;border-color:#f59e0b}
.cockpit-demo-showcase .cc-card--summary{background:#fffaf2!important;color:#334155}.cockpit-demo-showcase .cc-card--summary .cc-card__head{border-color:#eadfd0}.cockpit-demo-showcase .cc-card--summary .cc-card__title{color:#1e293b}.cockpit-demo-showcase .cc-card--summary .cc-card__eyebrow{color:#94a3b8}.cockpit-demo-showcase .cc-card--summary .cc-card__link{color:#ea580c}.cockpit-demo-showcase .cc-summary-kpi{display:flex;align-items:flex-end;gap:7px;padding:12px 0 9px}.cockpit-demo-showcase .cc-summary-kpi span{color:#94a3b8;font-size:.46rem;font-weight:850}.cockpit-demo-showcase .cc-summary-kpi strong{color:#1e293b;font-family:'Outfit',sans-serif;font-size:1.7rem;line-height:.8}.cockpit-demo-showcase .cc-summary-kpi small{color:#16a34a;font-size:.48rem;font-weight:850}.cockpit-demo-showcase .cc-summary-progress{padding:8px 0;border-top:1px solid #eadfd0;border-bottom:1px solid #eadfd0}.cockpit-demo-showcase .cc-summary-progress span,.cockpit-demo-showcase .cc-summary-progress b,.cockpit-demo-showcase .cc-summary-progress strong{display:block}.cockpit-demo-showcase .cc-summary-progress b{color:#94a3b8;font-size:.43rem}.cockpit-demo-showcase .cc-summary-progress strong{margin-top:3px;color:#475569;font-size:.52rem}.cockpit-demo-showcase .cc-summary-progress i{display:block;height:3px;margin-top:7px;border-radius:99px;background:#f59e0b}.cockpit-demo-showcase .cc-summary-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.cockpit-demo-showcase .cc-summary-links div{display:flex;align-items:center;gap:5px;color:#64748b;font-size:.47rem}.cockpit-demo-showcase .cc-summary-links span{color:#ea580c}.cockpit-demo-showcase .cc-summary-links b{font-weight:750}
.cockpit-demo-showcase .customer-notification-item{padding:8px 0;border-bottom-color:#eadfd0}.cockpit-demo-showcase .customer-notification-item strong{color:#475569;font-size:.49rem}.cockpit-demo-showcase .customer-notification-item small{color:#94a3b8;font-size:.44rem}

/* The real request studio opens inside the Cockpit and expands into the draft workspace. */
.cockpit-demo-showcase .demo-request-overlay{align-items:flex-start;padding:40px 20px;background:rgba(15,23,42,.52);backdrop-filter:blur(8px)}.cockpit-demo-showcase .customer-task-modal-dialog{width:min(780px,100%);max-height:calc(100% - 20px);border:0;border-radius:24px;background:#fffaf2;box-shadow:0 28px 80px rgba(15,23,42,.38)}.cockpit-demo-showcase .cai-head{min-height:82px;padding:17px 22px;border-radius:24px 24px 0 0}.cockpit-demo-showcase .cai-head-icon{width:36px;height:36px}.cockpit-demo-showcase .cai-title{font-size:1rem}.cockpit-demo-showcase .cai-experimental-note{font-size:.55rem}.cockpit-demo-showcase .cai-mode-switch{border-color:rgba(255,255,255,.12)}.cockpit-demo-showcase .customer-ai-request-modal-content{max-height:calc(100% - 82px);overflow:auto}.cockpit-demo-showcase .cai-entry-shell{width:min(680px,100%);margin:0 auto;padding:24px 30px 28px}.cockpit-demo-showcase .cai-brand-row{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.cockpit-demo-showcase .cai-brand-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#475569;font-size:.58rem}.cockpit-demo-showcase .cai-brand-pill--muted{background:#f8fafc;color:#94a3b8}.cockpit-demo-showcase .cai-brand-dot{width:6px;height:6px;border-radius:50%;background:#22c55e}.cockpit-demo-showcase .cai-brand-pill--muted .cai-brand-dot{background:#cbd5e1}.cockpit-demo-showcase .cai-textarea-wrap{position:relative}.cockpit-demo-showcase .demo-request-input{min-height:142px;padding:16px 14px;border:1px solid #d7dee6;border-radius:11px;background:#fff;color:#64748b;font-size:.72rem;font-weight:650;line-height:1.6}.cockpit-demo-showcase .cai-char-counter{position:absolute;right:12px;bottom:8px;color:#94a3b8;font-size:.5rem}.cockpit-demo-showcase .demo-request-file{display:flex;align-items:center;gap:6px;margin-top:10px;padding:8px 11px;border:1px dashed #d7dee6;border-radius:9px;color:#64748b;font-size:.56rem}.cockpit-demo-showcase .demo-request-help{margin-top:18px;padding:12px 14px;border:1px solid #fed7aa;border-radius:10px;background:#fff7ed;color:#a16207;font-size:.56rem;line-height:1.5}.cockpit-demo-showcase .demo-request-help strong{color:#92400e}.cockpit-demo-showcase .demo-request-submit{justify-content:center;margin-top:13px;padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#eab308);font-size:.62rem}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])){padding:10px}.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-task-modal-dialog{width:min(1440px,100%);max-height:100%;border-radius:16px}.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-head{border-radius:16px 16px 0 0}.cockpit-demo-showcase .customer-ai-studio-grid{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:0;max-height:calc(100% - 82px);overflow:hidden}.cockpit-demo-showcase .customer-ai-context-panel{min-width:0;padding:24px 20px;background:#fffaf2;border-right:1px solid #eadfd0}.cockpit-demo-showcase .cai-side-brand{display:flex;gap:7px;margin-bottom:20px}.cockpit-demo-showcase .cai-side-brand .cai-brand-pill{font-size:.54rem}.cockpit-demo-showcase .customer-ai-context-label{display:block;color:#94a3b8;font-size:.51rem;font-weight:900;letter-spacing:.08em}.cockpit-demo-showcase .customer-ai-source-summary{margin-top:10px;padding:12px;border:1px dashed #cbd5e1;border-radius:10px;color:#64748b;font-size:.64rem;font-style:italic;font-weight:650;line-height:1.55}.cockpit-demo-showcase .cai-context-footer{display:flex;align-items:center;justify-content:space-between;margin-top:25px;color:#64748b;font-size:.58rem}.cockpit-demo-showcase .cai-context-footer b{padding:8px 10px;border-radius:9px;color:#b45309;background:#fff;border:1px solid #fed7aa;font-size:.53rem}.cockpit-demo-showcase .customer-ai-drafts-panel{min-width:0;padding:20px;background:#fff}.cockpit-demo-showcase .demo-draft-panel{display:block;padding:0;border:0;background:#fff}.cockpit-demo-showcase .demo-draft-panel-head{align-items:flex-end;padding:0 0 12px;border-bottom:1px solid #e2e8f0}.cockpit-demo-showcase .demo-draft-panel-head span{color:#64748b;font-size:.54rem}.cockpit-demo-showcase .demo-draft-panel-head strong{font-size:.92rem}.cockpit-demo-showcase .demo-draft-panel-head em{color:#16a34a}.cockpit-demo-showcase .demo-draft-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px}.cockpit-demo-showcase .demo-draft-card{min-height:170px;padding:0 12px 13px;border:1px solid #fca5a5;border-radius:13px;background:#fff;box-shadow:0 8px 18px rgba(239,68,68,.1)}.cockpit-demo-showcase .draft-card-queue{display:flex;align-items:center;justify-content:center;margin:0 -12px 12px;padding:7px 8px;border-radius:12px 12px 0 0;background:#ef4444;color:#fff;font-size:.57rem;font-weight:900}.cockpit-demo-showcase .demo-draft-card>span:not(.draft-card-queue){display:inline-block;padding:4px 6px;border-radius:5px;background:#fef3c7;color:#b45309;font-size:.49rem;font-weight:900}.cockpit-demo-showcase .demo-draft-card h4{margin:9px 0 7px;color:#172033;font-size:.72rem;line-height:1.25}.cockpit-demo-showcase .demo-draft-card small{color:#475569;font-size:.55rem;line-height:1.45}.cockpit-demo-showcase .demo-draft-card.is-created{border-color:#f59e0b;background:#fffaf2}.cockpit-demo-showcase .demo-create-button{justify-content:center;gap:8px;margin-top:14px;padding:12px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#eab308);font-size:.61rem}

/* Calendar reference: full product dialog, 7 columns, KPI row and delivery briefing. */
.cockpit-demo-showcase .demo-calendar-modal{padding:10px;background:rgba(15,23,42,.5);backdrop-filter:blur(8px)}.cockpit-demo-showcase .customer-work-calendar-dialog{width:100%;height:100%;padding:10px 12px;border:0;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25)}.cockpit-demo-showcase .customer-work-calendar-close{position:absolute;top:9px;right:10px;z-index:2;display:grid;place-items:center;width:25px;height:25px;border:1px solid #e2e8f0;border-radius:50%;background:#fff;color:#64748b;font-size:1rem;line-height:1}.cockpit-demo-showcase .customer-work-calendar-head{padding:0 40px 6px 0;border-bottom-color:#e2e8f0}.cockpit-demo-showcase .customer-work-calendar-title{font-size:.98rem}.cockpit-demo-showcase .customer-work-calendar-subtitle{font-size:.56rem}.cockpit-demo-showcase .customer-work-calendar-controls{gap:6px}.cockpit-demo-showcase .customer-work-calendar-month-nav{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #e2e8f0;border-radius:7px;color:#475569;font-size:.56rem;font-weight:800}.cockpit-demo-showcase .customer-work-calendar-month-nav>span:first-child,.cockpit-demo-showcase .customer-work-calendar-month-nav>span:last-child{color:#ea580c;font-size:.85rem}.cockpit-demo-showcase .customer-work-calendar-month-label{min-width:83px;padding:0;border:0}.cockpit-demo-showcase .customer-work-calendar-today-btn{padding:6px 9px;border-color:#fed7aa;background:#fff7ed;color:#b45309}.cockpit-demo-showcase .customer-work-calendar-kpi{display:flex;justify-content:center;gap:9px;padding:10px 0 7px}.cockpit-demo-showcase .customer-work-calendar-kpi-card{position:relative;display:flex;min-width:112px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 11px 8px 14px;border-color:#e2e8f0;border-radius:8px;background:#fff;color:#64748b;font-size:.51rem}.cockpit-demo-showcase .customer-work-calendar-kpi-card:before{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;content:'';background:#0284c7}.cockpit-demo-showcase .customer-work-calendar-kpi-card.created:before{background:#d97706}.cockpit-demo-showcase .customer-work-calendar-kpi-card.completed:before{background:#059669}.cockpit-demo-showcase .customer-work-calendar-kpi-card.remaining:before{background:#ea580c}.cockpit-demo-showcase .customer-work-calendar-kpi-card b{font-size:.95rem}.cockpit-demo-showcase .customer-work-calendar-summary-line{margin-bottom:7px;font-size:.55rem}.cockpit-demo-showcase .customer-work-calendar-toolbar{margin-bottom:6px}.cockpit-demo-showcase .customer-work-calendar-legend{gap:8px}.cockpit-demo-showcase .customer-work-calendar-legend span{font-size:.5rem}.cockpit-demo-showcase .customer-work-calendar-dot.expiry{width:6px;height:6px;border-radius:50%;background:#a855f7}.cockpit-demo-showcase .customer-work-calendar-brand-filter{display:flex;gap:5px}.cockpit-demo-showcase .customer-work-calendar-brand-filter span{padding:5px 7px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#64748b;font-size:.49rem;font-weight:800}.cockpit-demo-showcase .customer-work-calendar-brand-filter span.is-active{border-color:#111827;background:#111827;color:#fff}.cockpit-demo-showcase .customer-work-calendar-body{grid-template-columns:minmax(0,1.85fr) minmax(220px,.55fr);gap:8px}.cockpit-demo-showcase .customer-work-calendar-grid{gap:4px}.cockpit-demo-showcase .customer-work-calendar-day{min-height:52px;padding:5px;border-color:#c5d0dc;border-radius:9px}.cockpit-demo-showcase .customer-work-calendar-day.is-empty{border-color:#eef2f5;background:#fafbfc}.cockpit-demo-showcase .customer-work-calendar-day.is-today,.cockpit-demo-showcase .customer-work-calendar-day[data-demo-calendar-date="14"]{border-color:#ff6b00;background:#fff7ed;box-shadow:0 0 0 1px rgba(255,107,0,.15)}.cockpit-demo-showcase .customer-work-calendar-day-num{font-size:.57rem}.cockpit-demo-showcase .customer-work-calendar-chip{font-size:.45rem}.cockpit-demo-showcase .customer-work-calendar-detail{display:flex;min-height:0;flex-direction:column;padding:13px;border-color:#dbe4ef;border-radius:11px;background:#f8fafc}.cockpit-demo-showcase .customer-work-calendar-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.cockpit-demo-showcase .customer-work-calendar-detail-label{font-size:.46rem}.cockpit-demo-showcase .customer-work-calendar-detail strong{margin-top:6px;font-size:.72rem}.cockpit-demo-showcase .customer-work-calendar-detail p{margin:5px 0;color:#64748b;font-size:.52rem}.cockpit-demo-showcase .customer-work-calendar-detail-count{padding:5px 6px;border-radius:6px;background:#fff;color:#ea580c;font-size:.48rem;font-weight:900}.cockpit-demo-showcase .customer-work-calendar-detail-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0 8px}.cockpit-demo-showcase .customer-work-calendar-detail-metrics span{padding:6px 4px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#94a3b8;font-size:.43rem;text-align:center}.cockpit-demo-showcase .customer-work-calendar-detail-metrics b{display:block;color:#334155;font-size:.7rem}.cockpit-demo-showcase .customer-work-calendar-detail-summary{padding-bottom:8px;border-bottom:1px solid #e2e8f0}.cockpit-demo-showcase .customer-work-calendar-detail-list{min-height:0;overflow:hidden}.cockpit-demo-showcase .customer-work-calendar-detail-item{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid #e2e8f0}.cockpit-demo-showcase .customer-work-calendar-detail-item>i{width:3px;height:26px;flex:none;border-radius:3px;background:#0284c7}.cockpit-demo-showcase .customer-work-calendar-detail-item.created>i{background:#d97706}.cockpit-demo-showcase .customer-work-calendar-detail-item>div{min-width:0;flex:1}.cockpit-demo-showcase .customer-work-calendar-detail-item strong,.cockpit-demo-showcase .customer-work-calendar-detail-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cockpit-demo-showcase .customer-work-calendar-detail-item strong{margin:0;color:#334155;font-size:.5rem}.cockpit-demo-showcase .customer-work-calendar-detail-item small{margin-top:2px;color:#94a3b8;font-size:.43rem}.cockpit-demo-showcase .customer-work-calendar-detail-item>b{color:#94a3b8;font-size:.44rem}.cockpit-demo-showcase .customer-work-calendar-detail-footnote{margin-top:auto!important;padding-top:8px;color:#94a3b8!important;font-size:.45rem!important}

.cockpit-demo-showcase .customer-work-calendar-chip-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.cockpit-demo-showcase .cockpit-demo-stage{transform:none!important}}

/* Keep the showcase stable; a scaled bento surface makes the whole canvas appear oversized. */
.cockpit-demo-showcase .cc-bento{transform:none!important;transition:none!important}
.cockpit-demo-showcase .demo-request-overlay,
.cockpit-demo-showcase .demo-calendar-modal{backdrop-filter:none!important}
.cockpit-demo-showcase .customer-work-calendar-dialog{animation:none!important;transform:none!important}
body:has(.cockpit-demo-showcase) .bg-arrows,
body:has(.cockpit-demo-showcase) .bg-arrows *,
body:has(.cockpit-demo-showcase) .float-orb,
body:has(.cockpit-demo-showcase) .shape,
body:has(.cockpit-demo-showcase) .particle{animation:none!important}

/* Compact showcase surface: keep the Cockpit visible without letting the demo dominate the page. */
.cockpit-demo-showcase .cockpit-demo-canvas,
.cockpit-demo-showcase .cockpit-demo-stage,
.cockpit-demo-showcase .cc-dash{min-height:660px}
.cockpit-demo-showcase .cc-dash{padding:18px 22px 22px}
.cockpit-demo-showcase .cc-bento{margin-top:14px}
.cockpit-demo-showcase .cc-card--automations,
.cockpit-demo-showcase .cc-card--tasks{height:350px;min-height:350px;overflow:hidden}
.cockpit-demo-showcase .demo-request-overlay{padding:18px 16px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-entry-shell{display:none}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-studio-grid{grid-template-columns:230px minmax(0,1fr)}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-context-panel{padding:18px 16px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-drafts-panel{padding:16px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:10px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card{min-height:142px;padding:0 9px 10px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .draft-card-queue{margin:0 -9px 9px;padding:6px 5px;font-size:.51rem}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card h4{margin:7px 0 4px;font-size:.65rem}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card small{font-size:.5rem;line-height:1.3}

/* Calendar status: completed work is green through today; future work stays planned. */
.cockpit-demo-showcase .customer-work-calendar-day.is-completed{border-color:#bbf7d0;background:#f0fdf4}
.cockpit-demo-showcase .customer-work-calendar-day.is-completed.is-today,
.cockpit-demo-showcase .customer-work-calendar-day.is-completed[data-demo-calendar-date="14"]{border-color:#22c55e;background:#f0fdf4;box-shadow:0 0 0 1px rgba(34,197,94,.16)}
.cockpit-demo-showcase .customer-work-calendar-day.is-planned{border-color:#cbd5e1;background:#fff}
.cockpit-demo-showcase .customer-work-calendar-day.is-completed .customer-work-calendar-chip{color:#166534}
.cockpit-demo-showcase .customer-work-calendar-day.is-planned .customer-work-calendar-chip{color:#475569}
.cockpit-demo-showcase .customer-work-calendar-day-meta-dot.completed{background:#22c55e}
.cockpit-demo-showcase .customer-work-calendar-detail-item.completed>i{background:#22c55e}


/* Draft workspace: all four generated requests stay visible together. */
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-task-modal-dialog{overflow:hidden}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-request-modal-content{height:calc(100% - 82px);max-height:none;overflow:hidden}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-studio-grid{height:100%;max-height:none;overflow:hidden}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-drafts-panel{min-width:0;min-height:0;overflow:hidden}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch;overflow:visible}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card{min-width:0;min-height:0;height:146px;overflow:hidden}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* The calendar intentionally has a few empty and light days among the busy ones. */
.cockpit-demo-showcase .customer-work-calendar-day[hidden]{display:none}
.cockpit-demo-showcase .customer-work-calendar-stack [hidden]{display:none}
.cockpit-demo-showcase .customer-work-calendar-day-meta[hidden]{display:none}
.cockpit-demo-showcase .customer-work-calendar-more[hidden]{display:none}


/* Compact calendar modal: keep the six-week grid inside the showcase without overflow. */
.cockpit-demo-showcase .customer-work-calendar-modal{
  padding:18px;
}
.cockpit-demo-showcase .customer-work-calendar-dialog{
  width:min(900px,calc(100% - 28px));
  height:min(590px,calc(100% - 28px));
  max-height:calc(100% - 28px);
  min-width:0;
  padding:11px;
  box-sizing:border-box;
  overflow:hidden;
}
.cockpit-demo-showcase .customer-work-calendar-head{
  padding:2px 2px 9px;
}
.cockpit-demo-showcase .customer-work-calendar-kpi{
  gap:5px;
  padding:8px 0 6px;
}
.cockpit-demo-showcase .customer-work-calendar-kpi-card{
  padding:6px 8px;
}
.cockpit-demo-showcase .customer-work-calendar-summary-line{
  margin-bottom:6px;
}
.cockpit-demo-showcase .customer-work-calendar-body{
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.cockpit-demo-showcase .customer-work-calendar-main{
  display:flex;
  min-width:0;
  height:100%;
  min-height:0;
  flex-direction:column;
  overflow:hidden;
}
.cockpit-demo-showcase .customer-work-calendar-grid{
  min-height:0;
  gap:3px;
}
.cockpit-demo-showcase .customer-work-calendar-main .customer-work-calendar-grid{
  height:auto;
  min-height:0;
  flex:1 1 auto;
  gap:3px;
}
.cockpit-demo-showcase .customer-work-calendar-day{
  min-height:42px;
  padding:4px;
}
.cockpit-demo-showcase .customer-work-calendar-stack{
  gap:1px;
  margin-top:2px;
}
.cockpit-demo-showcase .customer-work-calendar-chip{
  padding:1px 0;
  font-size:.42rem;
}
.cockpit-demo-showcase .customer-work-calendar-chip-dot{
  height:9px;
}
.cockpit-demo-showcase .customer-work-calendar-detail{
  min-width:0;
  padding:10px;
  overflow:hidden;
}
.cockpit-demo-showcase .customer-work-calendar-detail-list{
  min-height:0;
  overflow:hidden;
}

/* Compact modal treatment: avoid full-width form fields and window-like empty space. */
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .cai-entry-shell{
  width:min(480px,100%);
  padding:16px 18px 18px;
}
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .demo-request-input{
  min-height:104px;
  padding:11px 12px;
}
.cockpit-demo-showcase .demo-request-input:focus,
.cockpit-demo-showcase .demo-request-input.is-focused{
  outline:2px solid rgba(234,179,8,.55);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(234,179,8,.12);
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-studio-grid{
  grid-template-columns:150px minmax(0,1fr);
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-context-panel{
  padding:12px 9px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-source-summary{
  max-height:72px;
  overflow:hidden;
  padding:9px;
  font-size:.55rem;
  line-height:1.4;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-context-footer{
  margin-top:14px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-drafts-panel{
  padding:11px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-list{
  gap:5px;
  padding-top:8px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card{
  height:122px;
  padding:0 7px 8px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .draft-card-queue{
  margin-left:-7px;
  margin-right:-7px;
  margin-bottom:6px;
  padding:5px 3px;
  font-size:.43rem;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card h4{
  margin:5px 0 3px;
  font-size:.56rem;
  line-height:1.18;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-draft-card small{
  font-size:.43rem;
  line-height:1.2;
}

/* Visible focus transition for the animated request input. */
.cockpit-demo-showcase .demo-request-input{
  transition:border-color 240ms ease,box-shadow 240ms ease,transform 240ms ease,background-color 240ms ease;
}
.cockpit-demo-showcase .demo-request-input.is-focused{
  border-color:#eab308;
  background-color:#fffef8;
  animation:showcase-input-focus-pulse 1.6s ease-in-out infinite;
}
.cockpit-demo-showcase .demo-request-input.is-focused::after{
  animation:showcase-focused-caret .72s steps(1) infinite;
}
@keyframes showcase-input-focus-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(234,179,8,0),0 1px 2px rgba(15,23,42,.04);transform:translateY(0)}
  50%{box-shadow:0 0 0 4px rgba(234,179,8,.15),0 6px 15px rgba(234,179,8,.11);transform:translateY(-1px)}
}
@keyframes showcase-focused-caret{
  0%,45%{opacity:1}
  46%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .cockpit-demo-showcase .demo-request-input.is-focused{animation:none;transform:none}
  .cockpit-demo-showcase .demo-request-input.is-focused::after{animation:none;opacity:1}
}

.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-outcomes-ready="true"] [data-demo-created-task] .customer-task-card{animation:showcase-queue-result 720ms cubic-bezier(.22,1,.36,1) both}
@keyframes showcase-queue-result{0%{box-shadow:0 0 0 0 rgba(250,204,21,0)}35%{box-shadow:0 0 0 3px rgba(250,204,21,.28),0 12px 28px rgba(234,179,8,.15)}100%{box-shadow:0 0 0 1px rgba(250,204,21,.12)}}

/* The Cockpit stays still; only the compact assistant surface follows the active target. */
.cockpit-demo-showcase .cockpit-demo-stage{
  transform:none!important;
  transition:none;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .demo-request-overlay{
  background:rgba(3,6,10,.82);
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .customer-task-modal-dialog{
  animation:none!important;
}
.cockpit-demo-showcase .cai-textarea-wrap{
  position:relative;
  z-index:4;
}
.cockpit-demo-showcase .demo-request-overlay.is-opening .customer-task-modal-dialog{
  will-change:transform,opacity;
}

/* Product surfaces expand from their real Cockpit triggers without moving the Cockpit camera. */
.cockpit-demo-showcase .demo-morph-surface{
  position:absolute;
  z-index:45;
  display:block;
  box-sizing:border-box;
  border:1px solid rgba(245,158,11,.75);
  border-radius:9px;
  background:#facc15;
  box-shadow:0 12px 34px rgba(245,158,11,.28);
  pointer-events:none;
  contain:layout paint;
  will-change:left,top,width,height,border-radius,background-color,opacity;
}
.cockpit-demo-showcase .demo-morph-surface--calendar{
  background:#facc15;
}
.cockpit-demo-showcase .demo-request-overlay.is-morphing .customer-task-modal-dialog,
.cockpit-demo-showcase .demo-calendar-modal.is-morphing .customer-work-calendar-dialog{
  opacity:0;
  transform:none!important;
  animation:none!important;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="calendar-opening"] .cc-work-calendar-button{
  position:relative;
  z-index:3;
  border-color:#f59e0b;
  box-shadow:0 0 0 5px rgba(245,158,11,.14),0 10px 24px rgba(245,158,11,.2);
  animation:showcase-calendar-trigger 820ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes showcase-calendar-trigger{
  0%,58%{transform:translateY(0) scale(1)}
  72%{transform:translateY(1px) scale(.96)}
  100%{transform:translateY(0) scale(1)}
}

.cockpit-demo-showcase .customer-ai-studio-grid{position:relative}
.cockpit-demo-showcase .customer-ai-context-panel,
.cockpit-demo-showcase .customer-ai-drafts-panel{position:relative;z-index:3}
.cockpit-demo-showcase .customer-ai-source-summary,
.cockpit-demo-showcase .demo-draft-card{position:relative;z-index:5}
.cockpit-demo-showcase [data-demo-drafts-panel] .demo-draft-list article{
  --demo-camera-x:0px;
  --demo-camera-y:0px;
  --demo-camera-scale:1;
  --demo-camera-duration:300ms;
  position:relative;
  opacity:0;
  transform:translate3d(var(--demo-camera-x),var(--demo-camera-y),0) scale(var(--demo-camera-scale));
  transform-origin:0 0;
  transition:transform var(--demo-camera-duration) cubic-bezier(.22,1,.36,1),opacity 220ms ease-out,border-color 320ms ease,background-color 320ms ease;
}
.cockpit-demo-showcase [data-demo-drafts-panel] .demo-draft-list article.is-visible{
  opacity:1;
  transform:translate3d(var(--demo-camera-x),var(--demo-camera-y),0) scale(var(--demo-camera-scale));
}
.cockpit-demo-showcase [data-demo-drafts-panel] .demo-draft-list article.is-focused{
  z-index:12;
  opacity:1;
  border-color:#f59e0b;
  background:#fffdf2;
  box-shadow:0 0 0 3px rgba(245,158,11,.18),0 18px 38px rgba(15,23,42,.2);
  filter:none;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-draft-focus]:not([data-demo-draft-focus="0"]) [data-demo-drafts-panel] .demo-draft-card.is-visible:not(.is-focused){
  opacity:.72;
  filter:none;
}

.cockpit-demo-showcase .customer-work-calendar-day.is-demo-updated{
  animation:showcase-calendar-update 1.25s ease-in-out 2;
}
@keyframes showcase-calendar-update{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}
  50%{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
}

/* Calendar skeleton stays visible while task density is revealed day by day. */
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-kpi-card b,
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-summary-line strong{
  opacity:0;
  transform:translateY(3px);
}
.cockpit-demo-showcase .customer-work-calendar-kpi-card b,
.cockpit-demo-showcase .customer-work-calendar-summary-line strong{
  transition:opacity 360ms ease,transform 360ms ease;
}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-complete .customer-work-calendar-kpi-card b,
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-complete .customer-work-calendar-summary-line strong{
  opacity:1;
  transform:none;
}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day:not(.is-calendar-filled){
  border-color:#e2e8f0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day:not(.is-calendar-filled) .customer-work-calendar-stack,
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day:not(.is-calendar-filled) .customer-work-calendar-day-meta{
  opacity:0;
  transform:translateY(5px);
}
.cockpit-demo-showcase .customer-work-calendar-day{
  transition:border-color 260ms ease,background-color 260ms ease,box-shadow 260ms ease;
}
.cockpit-demo-showcase .customer-work-calendar-stack,
.cockpit-demo-showcase .customer-work-calendar-day-meta{
  transition:opacity 260ms ease,transform 260ms cubic-bezier(.22,1,.36,1);
}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day.is-calendar-filled{
  animation:showcase-calendar-day-fill 320ms cubic-bezier(.22,1,.36,1) both;
}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day.is-calendar-filled .customer-work-calendar-chip{
  animation:showcase-calendar-chip-fill 280ms cubic-bezier(.22,1,.36,1) both;
}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day.is-calendar-filled .customer-work-calendar-chip:nth-child(2){animation-delay:45ms}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day.is-calendar-filled .customer-work-calendar-chip:nth-child(3){animation-delay:90ms}
.cockpit-demo-showcase .demo-calendar-modal.is-calendar-loading .customer-work-calendar-day.is-calendar-filled .customer-work-calendar-chip:nth-child(4){animation-delay:135ms}
@keyframes showcase-calendar-day-fill{
  from{opacity:.68;transform:translateY(3px)}
  to{opacity:1;transform:none}
}
@keyframes showcase-calendar-chip-fill{
  from{opacity:0;transform:translateX(-5px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .cockpit-demo-showcase .cockpit-demo-stage{
    transform:none!important;
    transition:none;
  }
  .cockpit-demo-showcase .demo-morph-surface{display:none}
}

/* One calm product sentence explains the three major stages. */
.cockpit-demo-story{
  --story-progress:0;
  --story-progress-duration:480ms;
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:0;
  max-width:1180px;
  min-height:64px;
  margin:0 auto 14px;
  padding:10px 18px 12px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.24);
  border-radius:15px;
  background:rgba(255,255,255,.88);
  box-shadow:0 9px 24px rgba(15,23,42,.06);
}
.cockpit-demo-story__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#eab308;transform:scaleX(var(--story-progress));transform-origin:left;transition:transform var(--story-progress-duration) linear}
.cockpit-demo-story.is-progressing .cockpit-demo-story__progress{animation:cockpit-story-progress 29600ms linear forwards;transition:none}
.cockpit-demo-story.is-progressing[data-demo-paused="true"] .cockpit-demo-story__progress{animation-play-state:paused}
@keyframes cockpit-story-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cockpit-demo-story[data-demo-story-state="complete"] .cockpit-demo-story__progress{background:#22c55e}
.cockpit-demo-showcase .cockpit-demo-empty{
  display:flex;
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:20px;
  color:#64748b;
  text-align:center;
}
.cockpit-demo-showcase .cockpit-demo-empty::before{
  content:'';
  width:30px;
  height:30px;
  border:1px dashed rgba(148,163,184,.45);
  border-radius:10px;
  background:rgba(148,163,184,.06);
}
.cockpit-demo-showcase .cockpit-demo-empty strong{color:#cbd5e1;font-size:.68rem}
.cockpit-demo-showcase .cockpit-demo-empty small{max-width:220px;color:#64748b;font-size:.56rem;line-height:1.45}
.cockpit-demo-showcase [data-demo-populated="false"] [data-demo-created-task],
.cockpit-demo-showcase [data-demo-populated="false"] .cc-summary-kpi,
.cockpit-demo-showcase [data-demo-populated="false"] .cc-summary-progress,
.cockpit-demo-showcase [data-demo-populated="false"] .cc-summary-links,
.cockpit-demo-showcase [data-demo-populated="false"] .customer-notifications-minimalist-list{display:none}
.cockpit-demo-showcase [data-demo-populated="true"] [data-demo-task-empty]{display:none}
.cockpit-demo-showcase [data-demo-populated="true"] [data-demo-created-task]{animation:showcase-cockpit-populate 560ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--demo-created-index) * 120ms)}
.cockpit-demo-showcase [data-demo-populated="true"] .cc-right-stack .cockpit-demo-empty{display:none}
.cockpit-demo-showcase [data-demo-populated="true"] .cc-card--summary .cc-summary-kpi{display:flex}
.cockpit-demo-showcase [data-demo-populated="true"] .cc-card--summary .cc-summary-progress{display:block}
.cockpit-demo-showcase [data-demo-populated="true"] .cc-card--summary .cc-summary-links{display:grid}
.cockpit-demo-showcase [data-demo-populated="true"] .cc-card--activity .customer-notifications-minimalist-list{display:block;animation:showcase-activity-in 420ms ease both}
.cockpit-demo-showcase .cc-right-stack .cockpit-demo-empty{opacity:.72}
@keyframes showcase-cockpit-populate{from{opacity:0}to{opacity:1}}
/* One compact modal rule set owns the final geometry; motion only interpolates between these bounds. */
.cockpit-demo-showcase .demo-request-overlay .customer-task-modal-dialog{
  transform:none;
  animation:none!important;
}
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .customer-task-modal-dialog{
  width:min(560px,calc(100% - 44px));
  max-width:560px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-task-modal-dialog{
  width:min(650px,calc(100% - 40px));
  max-width:650px;
}

@media(max-width:720px){
  .cockpit-demo-story{min-height:64px;margin-bottom:10px;padding:10px 12px 13px}
}
@media(prefers-reduced-motion:reduce){
  .cockpit-demo-story__progress{transition:none}
}

/* Keep planned work visible and let request drafts continue inside the same compact dialog. */
.cockpit-demo-showcase .demo-request-file{display:none!important}
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .cai-entry-shell{
  width:min(520px,100%);
}
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .demo-request-input{
  min-height:158px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-entry-shell{
  display:block!important;
  width:100%;
  margin:0;
  padding:12px 16px 10px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-brand-row{
  justify-content:flex-start;
  margin-bottom:8px;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-request-input{
  min-height:64px;
  max-height:64px;
  overflow:hidden;
  padding:9px 11px;
  font-size:.6rem;
  line-height:1.35;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-char-counter,
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-request-help,
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-request-analysis,
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-request-submit{display:none!important}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-request-modal-content{
  display:block;
  height:auto;
  max-height:calc(100% - 82px);
  overflow:hidden;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-studio-grid{
  display:block;
  height:auto;
  max-height:none;
  overflow:hidden;
  border-top:1px solid #eadfd0;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-context-panel{display:none!important}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-ai-drafts-panel{
  padding:10px 16px 14px;
}

/* Cohesive RestoUp palette across the passive product film. */
.cockpit-demo-showcase{
  --demo-orange:#ff6b00;
  --demo-gold:#f4b400;
  --demo-ink:#0b1018;
  --demo-cream:#fffaf2;
  background:linear-gradient(180deg,#faf8f5 0,#eef2f6 100%);
}
.cockpit-demo-showcase .cockpit-demo-canvas{
  border-color:#d9dee6;
  background:radial-gradient(circle at 50% 0,#17202b 0,var(--demo-ink) 62%);
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.cockpit-demo-showcase .demo-request-overlay{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.cockpit-demo-showcase .cc-btn--primary,
.cockpit-demo-showcase .cc-work-calendar-icon{background:linear-gradient(135deg,var(--demo-orange),var(--demo-gold));color:#fff}
.cockpit-demo-story__progress{background:linear-gradient(90deg,var(--demo-orange),var(--demo-gold))}
.cockpit-demo-showcase .cai-head{border-bottom:1px solid rgba(255,107,0,.35);background:linear-gradient(135deg,#080c12,#151d28)}
.cockpit-demo-showcase .cai-title{color:#fff}
.cockpit-demo-showcase .cai-head-icon{border-color:rgba(255,107,0,.55);color:#ffd166}
.cockpit-demo-showcase{
  padding:72px 0 96px;
  scroll-margin-top:88px;
}
.cockpit-demo-intro{
  max-width:760px;
  margin-bottom:22px;
}
.cockpit-demo-intro .section-title{
  max-width:700px;
  font-size:clamp(2rem,4.2vw,3.45rem);
  line-height:1.03;
  letter-spacing:-.045em;
}
.cockpit-demo-intro .section-sub{
  max-width:680px;
  font-size:.98rem;
  line-height:1.55;
}
.cockpit-demo-story{
  min-height:68px;
  margin-bottom:10px;
  padding:10px 16px 12px;
}
@media(max-width:720px){
  .cockpit-demo-showcase{padding:52px 0 72px}
  .cockpit-demo-intro{margin-bottom:16px}
  .cockpit-demo-intro .section-title{font-size:clamp(1.85rem,8.5vw,2.5rem)}
  .cockpit-demo-intro .section-sub{font-size:.88rem}
}
.cockpit-demo-showcase .demo-request-submit{background:linear-gradient(135deg,var(--demo-orange),var(--demo-gold));color:#fff}
.cockpit-demo-showcase .demo-draft-card{border-color:#e5e7eb;background:#fff;box-shadow:0 7px 18px rgba(15,23,42,.08)}
.cockpit-demo-showcase .draft-card-queue{background:linear-gradient(135deg,#111827,#202a38);color:#fff;letter-spacing:.06em}
.cockpit-demo-showcase .demo-draft-card>span:not(.draft-card-queue){background:#fff1df;color:#b54708}
.cockpit-demo-showcase [data-demo-drafts-panel] .demo-draft-list article.is-focused{border-color:var(--demo-orange);background:#fffaf2;box-shadow:0 0 0 3px rgba(255,107,0,.17),0 18px 38px rgba(15,23,42,.18)}
.cockpit-demo-showcase .customer-task-card.stage-created{border-color:#f7a45f;background:linear-gradient(180deg,#fffdf9,#fff8ef)}
.cockpit-demo-showcase .customer-task-type-icon{background:#fff0df;color:var(--demo-orange)}
.cockpit-demo-showcase .customer-task-status,
.cockpit-demo-showcase .customer-task-open-label{color:#d95700}
.cockpit-demo-showcase .cc-card--summary{background:linear-gradient(180deg,#fffaf2,#fffdf9)!important}
.cockpit-demo-showcase .customer-work-calendar-day.is-today,
.cockpit-demo-showcase .customer-work-calendar-day[data-demo-calendar-date="14"]{border-color:var(--demo-orange);background:#fff6ec;box-shadow:0 0 0 1px rgba(255,107,0,.14)}

/* The mobile showcase is the same desktop scene, fitted into a smaller window. */
.cockpit-demo-showcase .cockpit-demo-canvas{
  width:100%;
  max-width:1152px;
  height:662px;
  min-height:0!important;
}
.cockpit-demo-showcase .cockpit-demo-fit{
  --demo-fit-scale:1;
  position:relative;
  width:1150px;
  height:660px;
  transform:scale(var(--demo-fit-scale));
  transform-origin:0 0;
}
.cockpit-demo-showcase .cockpit-demo-stage,
.cockpit-demo-showcase .cc-dash{
  width:1150px;
  min-width:1150px;
  height:660px;
  min-height:660px;
}

/* Floating glass navigation pill. */
.header,
.header.scrolled{
  top:-6px;
  padding:0 20px!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none;
}
.header .container{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(1180px,100%);
  max-width:1180px;
  min-height:66px;
  padding:8px 10px 8px 20px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:999px;
  background:linear-gradient(125deg,rgba(255,255,255,.86),rgba(255,255,255,.68) 52%,rgba(255,226,204,.76));
  box-shadow:0 22px 56px rgba(15,23,42,.19),0 4px 18px rgba(255,107,0,.1),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.62);
  backdrop-filter:blur(44px) saturate(220%) contrast(108%);
  -webkit-backdrop-filter:blur(44px) saturate(220%) contrast(108%);
  pointer-events:auto;
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.header .container::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(110deg,rgba(255,255,255,.78),rgba(255,255,255,.18) 36%,rgba(255,107,0,.08) 72%,rgba(255,255,255,.52));
  pointer-events:none;
}
.header.scrolled .container{
  border-color:rgba(255,255,255,.94);
  background:linear-gradient(125deg,rgba(255,255,255,.94),rgba(255,255,255,.82) 52%,rgba(255,226,204,.86));
  box-shadow:0 20px 52px rgba(15,23,42,.22),0 4px 18px rgba(255,107,0,.1),inset 0 1px 0 #fff;
}
.header .header-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.header .logo-image{width:56px;height:56px}
.header .logo{font-size:2rem;line-height:1}
.header .header-slogan{
  margin-left:16px;
  padding-left:16px;
  border-left:1px solid rgba(28,25,23,.2);
  color:rgba(28,25,23,.58);
  font-family:'Segoe Print','Bradley Hand',cursive;
  font-size:.8rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  transform:translateY(2px);
}
.header .nav{
  gap:3px;
  padding:4px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
}
.header .nav a{
  padding:8px 14px;
  border-radius:999px;
  transition:color .2s ease,background-color .2s ease;
}
.header .nav a:hover{background:rgba(255,255,255,.72)}
.header .header-cta{
  min-height:46px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(255,107,0,.2),inset 0 1px 0 rgba(255,255,255,.32);
}
.header-login{
  position:absolute;
  top:50%;
  right:16px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:var(--text);
  box-shadow:0 10px 24px rgba(15,23,42,.14),inset 0 1px 0 #fff;
  pointer-events:auto;
  transform:translateY(-50%);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.header-login svg{width:20px;height:20px}
.header-login:hover{background:rgba(255,255,255,.72);box-shadow:0 12px 28px rgba(15,23,42,.18),inset 0 1px 0 #fff;transform:translateY(-50%) scale(1.05)}
@media(max-width:1300px){.header-login{display:none}}
@media(max-width:768px){
  .header,
  .header.scrolled{top:-6px;padding:0 12px!important;background:transparent!important}
  .header .container{min-height:56px;padding:7px 10px 7px 14px;border-radius:999px;background:rgba(255,248,239,.96);backdrop-filter:none;-webkit-backdrop-filter:none;background-color:rgba(255,248,239,.99)}
  .header .header-brand{min-width:0;flex:1;overflow:hidden}
  .header .logo{font-size:1.75rem}
  .header .header-slogan{display:block;min-width:0;overflow:hidden;margin-left:8px;padding-left:8px;font-size:.54rem;text-overflow:ellipsis}
  .header .hamburger{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid rgba(255,107,0,.2);border-radius:14px;background:rgba(255,255,255,.45);box-shadow:0 5px 14px rgba(15,23,42,.08),inset 0 1px 0 #fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
  .header .hamburger span{position:absolute;top:50%;left:50%;width:19px;height:2px;margin:0;background:var(--text)!important;transform-origin:center;border-radius:999px;transition:transform .24s ease,opacity .18s ease}
  .header .hamburger span:nth-child(1){transform:translate(-50%,-7px)}
  .header .hamburger span:nth-child(2){transform:translate(-50%,-1px)}
  .header .hamburger span:nth-child(3){transform:translate(-50%,5px)}
  .header .hamburger:hover,
  .header .hamburger[aria-expanded="true"]{border-color:rgba(255,107,0,.42);background:rgba(255,247,240,.92);box-shadow:0 7px 18px rgba(255,107,0,.13),inset 0 1px 0 #fff}
  .header .hamburger[aria-expanded="true"] span:nth-child(1){display:block!important;transform:translate(-50%,-1px) rotate(45deg)!important}
  .header .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0!important;transform:translate(-50%,-1px)!important}
  .header .hamburger[aria-expanded="true"] span:nth-child(3){display:block!important;transform:translate(-50%,-1px) rotate(-45deg)!important}
  .header .hamburger:focus-visible{outline:3px solid rgba(255,107,0,.22);outline-offset:2px}
  .header .mobile-menu{
    top:calc(100% + 10px);
    left:12px;
    right:12px;
    padding:18px 18px 32px;
    border:1px solid rgba(255,255,255,.82)!important;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,237,224,.32))!important;
    box-shadow:0 24px 55px rgba(15,23,42,.2),inset 0 1px 0 #fff;
    backdrop-filter:blur(28px) saturate(160%)!important;
    -webkit-backdrop-filter:blur(28px) saturate(160%)!important;
  }
  .header .mobile-menu a[href*="final-cta"]{box-shadow:none}
}

/* Cockpit demo: RestoUp team-owned subtask progress. */
.cockpit-demo-showcase [data-demo-created-task]{
  --demo-task-camera-x:0px;
  --demo-task-camera-y:0px;
  --demo-task-camera-scale:1;
  --demo-task-camera-duration:220ms;
  position:relative;
  z-index:1;
  min-width:0;
  padding-top:6px;
  transform:translate3d(var(--demo-task-camera-x),var(--demo-task-camera-y),0) scale(var(--demo-task-camera-scale));
  transform-origin:0 0;
  transition:transform var(--demo-task-camera-duration) cubic-bezier(.22,1,.36,1);
}
.cockpit-demo-showcase [data-demo-created-task] .customer-task-card{position:relative;transition:opacity 180ms ease}
.cockpit-demo-showcase [data-demo-created-task].is-focused{z-index:20}
.cockpit-demo-showcase [data-demo-created-task].is-focused .customer-task-card{outline:2px solid rgba(245,158,11,.55);outline-offset:2px}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-task-focus]:not([data-demo-task-focus="0"]) .cc-card--tasks,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-task-focus]:not([data-demo-task-focus="0"]) .cc-card--tasks .cc-card__body,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-task-focus]:not([data-demo-task-focus="0"]) .customer-task-list{overflow:visible!important}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-task-focus]:not([data-demo-task-focus="0"]) [data-demo-created-task]:not(.is-focused) .customer-task-card{opacity:.52}
.cockpit-demo-showcase [data-demo-created-task] .customer-subtask-preview{position:absolute;z-index:4;top:6px;left:50%;display:flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid rgba(255,107,0,.22);border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.08);opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity 180ms ease,transform 180ms ease}
.cockpit-demo-showcase [data-demo-created-task].has-subtasks .customer-subtask-preview{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cockpit-demo-showcase .customer-subtask-dot{position:relative;width:8px;height:8px;border:1.5px solid #cbd5e1;border-radius:50%;background:#f8fafc;box-sizing:border-box}
.cockpit-demo-showcase .customer-subtask-dot.is-done{border-color:#16a34a;background:#16a34a}
.cockpit-demo-showcase .customer-subtask-dot.is-done::after{content:"✓";position:absolute;inset:-2px;display:grid;place-items:center;color:#fff;font-size:6px;font-weight:900;line-height:1}
.cockpit-demo-showcase .customer-subtask-dot.is-active{border-color:#f97316;background:#fff7ed;box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.cockpit-demo-showcase .customer-subtask-mini-list{display:grid;gap:3px;max-height:0;margin:0 0 0 32px;padding:0;overflow:hidden;list-style:none;opacity:0;transition:max-height 220ms cubic-bezier(.22,1,.36,1),margin-top 220ms ease,opacity 160ms ease}
.cockpit-demo-showcase .customer-subtask-mini-list.is-visible{max-height:72px;margin-top:7px;opacity:1}
.cockpit-demo-showcase .customer-subtask-mini-list li{display:grid;grid-template-columns:8px minmax(0,1fr);align-items:center;gap:5px;min-width:0;color:#94a3b8;font-size:.41rem;font-weight:700;line-height:1.2;opacity:0;transform:translateX(-3px);transition:color 160ms ease,opacity 160ms ease,transform 160ms ease}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-visible{opacity:1;transform:none}
.cockpit-demo-showcase .customer-subtask-mini-list li i{position:relative;width:7px;height:7px;border:1px solid #cbd5e1;border-radius:50%;background:#fff;box-sizing:border-box}
.cockpit-demo-showcase .customer-subtask-mini-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-done{color:#15803d}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-done i{border-color:#16a34a;background:#16a34a}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-done i::after{content:"✓";position:absolute;inset:-2px;display:grid;place-items:center;color:#fff;font-size:5px;font-weight:900}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-active{color:#c2410c}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-active i{border-color:#f97316;background:#fff7ed;box-shadow:0 0 0 2px rgba(249,115,22,.12)}
.cockpit-demo-showcase .customer-subtask-mini-list li.is-pending{color:#94a3b8}
.cockpit-demo-showcase .customer-task-card.stage-work{border-color:#fdba74;background:linear-gradient(180deg,#fffdf9,#fff7ed)}
.cockpit-demo-showcase .customer-task-card.stage-work .customer-task-status,
.cockpit-demo-showcase .customer-task-card.stage-work .customer-task-open-label{color:#c2410c}
.cockpit-demo-showcase .customer-task-card.stage-done .customer-task-status,
.cockpit-demo-showcase .customer-task-card.stage-done .customer-task-open-label{color:#15803d}
.cockpit-demo-showcase [data-demo-created-task] .customer-task-toggle{padding:7px 8px}
.cockpit-demo-showcase [data-demo-task-list]{gap:6px}
.cockpit-demo-showcase [data-demo-created-task] .customer-task-preview-mid{margin:5px 0 0 30px}
.cockpit-demo-showcase [data-demo-created-task] .customer-stage-preview{margin:6px 0 0 30px}
.cockpit-demo-showcase [data-demo-created-task] .customer-subtask-mini-list{gap:2px;margin-left:30px}
.cockpit-demo-showcase [data-demo-created-task] .customer-subtask-mini-list.is-visible{max-height:60px;margin-top:4px}

/* Cockpit result balance: denser planning, larger active work, populated context. */
.cockpit-demo-showcase .cc-bento{grid-template-columns:225px minmax(0,1fr) 285px}
.cockpit-demo-showcase .cc-card--automations .cc-card__body{padding-top:6px}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-card{padding:5px 7px}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-card+.customer-recurring-card{margin-top:4px}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-icon{width:20px;height:20px;border-radius:7px;font-size:.65rem}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-title strong{font-size:.52rem}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-title strong,
.cockpit-demo-showcase .cc-card--automations .customer-recurring-meta{line-height:1.1}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-meta{margin-top:1px;font-size:.43rem}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-progress{display:none}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-foot{font-size:.43rem}
.cockpit-demo-showcase .cc-card--automations .cc-separate-note{display:none}
.cockpit-demo-showcase .cc-card--automations .cc-automation-calendar-action{padding-top:6px}
.cockpit-demo-showcase .cc-card--automations .cc-work-calendar-button{padding:6px 7px}
.cockpit-demo-showcase [data-demo-created-task] .customer-task-toggle{padding:9px 10px}
.cockpit-demo-showcase [data-demo-created-task] .customer-task-preview-top h3{font-size:.62rem}
.cockpit-demo-showcase [data-demo-created-task] .customer-task-status,
.cockpit-demo-showcase [data-demo-created-task] .customer-task-open-label{font-size:.5rem}
.cockpit-demo-showcase [data-demo-created-task] .customer-subtask-mini-list li{font-size:.44rem}

/* Live subscriber Cockpit alignment: one authoritative scoped theme. */
.cockpit-demo-showcase{
  --cc-live-bg:#090b0f;
  --cc-live-panel:#fff;
  --cc-live-text:#172033;
  --cc-live-muted:#64748b;
  --cc-live-line:rgba(23,32,51,.08);
  --cc-live-gold:#eab308;
  --cc-live-orange:#f59e0b;
  --cc-live-green:#22c55e;
  --cc-live-blue:#0ea5e9;
}
.cockpit-demo-showcase .cockpit-demo-canvas{
  background:var(--cc-live-bg);
  border-color:#202733;
}
.cockpit-demo-showcase .cc-dash{
  padding:18px 24px 24px;
  color:var(--cc-live-text);
  background:
    radial-gradient(circle at 8% 11%,rgba(234,179,8,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 31% 7%,rgba(234,179,8,.48) 0 1px,transparent 2px),
    radial-gradient(circle at 68% 13%,rgba(234,179,8,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 8%,rgba(234,179,8,.5) 0 1px,transparent 2px),
    radial-gradient(circle at 50% -20%,#1c222b 0,#11151b 36%,var(--cc-live-bg) 100%);
}
.cockpit-demo-showcase .cc-tool-header{
  grid-template-columns:minmax(250px,1fr) minmax(360px,1.25fr) auto;
  gap:18px;
  padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.cockpit-demo-showcase .cc-tool-header__brand>strong{font-size:1.45rem;color:#fff}
.cockpit-demo-showcase .cc-tool-header__brand>strong span{color:var(--cc-live-gold)}
.cockpit-demo-showcase .cc-tool-header__brand>span{color:rgba(255,255,255,.66)}
.cockpit-demo-showcase .cc-brief-ticker{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#cbd5e1}
.cockpit-demo-showcase .cc-header-actions{color:#cbd5e1}
.cockpit-demo-showcase .cc-header-actions span+span{color:var(--cc-live-gold)}
.cockpit-demo-showcase .cc-bento{
  display:grid;
  grid-template-columns:205px minmax(0,480px) 205px 182px;
  gap:10px;
  margin-top:14px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
.cockpit-demo-showcase .cc-bento>*{min-width:0;padding:12px 13px;border:0!important}
.cockpit-demo-showcase .cc-card,
.cockpit-demo-showcase .cc-right-stack>.cc-card{
  color:var(--cc-live-text);
  background:
    radial-gradient(circle at 12% 18%,rgba(255,122,0,.08) 0 1px,transparent 2px),
    var(--cc-live-panel);
  border:1px solid var(--cc-live-line)!important;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(23,32,51,.08);
}
.cockpit-demo-showcase .cc-bento>.cc-card--tasks{
  background:
    radial-gradient(circle at 12% 18%,rgba(255,122,0,.08) 0 1px,transparent 2px),
    var(--cc-live-panel)!important;
}
.cockpit-demo-showcase .cc-card--automations,
.cockpit-demo-showcase .cc-card--tasks,
.cockpit-demo-showcase .cc-right-stack,
.cockpit-demo-showcase .cc-card--activity{height:522px;min-height:522px}
.cockpit-demo-showcase .cc-right-stack{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:0;background:transparent;border:0!important;box-shadow:none}
.cockpit-demo-showcase .cc-right-stack>.cc-card{padding:12px 13px}
.cockpit-demo-showcase .cc-card--tools{min-height:92px}
.cockpit-demo-showcase .cc-card__head{min-height:54px;padding:0 0 12px;border-bottom:1px solid var(--cc-live-line)}
.cockpit-demo-showcase .cc-card__title{color:var(--cc-live-text);font-size:.9rem}
.cockpit-demo-showcase .cc-card__eyebrow{color:#94a3b8}
.cockpit-demo-showcase .cc-card__sub{color:var(--cc-live-muted)}
.cockpit-demo-showcase .cc-card__note,
.cockpit-demo-showcase .cc-card__link{color:#b77905}
.cockpit-demo-showcase .cc-card__body{padding-top:12px}
.cockpit-demo-showcase .cc-brand-pill{border-color:#e2e8f0;background:#f8fafc;color:#64748b}
.cockpit-demo-showcase .cc-brand-pill.is-active{border-color:rgba(234,179,8,.72);background:#fff8d9;color:#9a6700}
.cockpit-demo-showcase .cc-btn--primary{background:linear-gradient(135deg,#f59e0b,#facc15);color:#172033;box-shadow:0 8px 20px rgba(245,158,11,.22)}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-card{
  padding:8px 9px;
  border:1px solid #edf1f5;
  border-radius:10px;
  background:linear-gradient(180deg,#fffdf8,#fffaf2);
  box-shadow:0 5px 14px rgba(23,32,51,.05);
}
.cockpit-demo-showcase .cc-card--automations .customer-recurring-card+.customer-recurring-card{margin-top:7px}
.cockpit-demo-showcase .customer-recurring-icon{background:#e8f7fb;color:#1494b8;border:1px solid #c9edf5}
.cockpit-demo-showcase .customer-recurring-title strong{color:var(--cc-live-text);font-size:.54rem}
.cockpit-demo-showcase .customer-recurring-meta,
.cockpit-demo-showcase .customer-recurring-foot{color:var(--cc-live-muted)}
.cockpit-demo-showcase .customer-recurring-state{color:#15803d}
.cockpit-demo-showcase .customer-recurring-progress{display:block;background:#e5e7eb}
.cockpit-demo-showcase .customer-recurring-progress i{background:linear-gradient(90deg,var(--cc-live-green),var(--cc-live-gold))}
.cockpit-demo-showcase .cc-work-calendar-button{border-color:#111827;background:linear-gradient(135deg,#fffaf0,#fff7e8);color:var(--cc-live-text)}
.cockpit-demo-showcase .cc-work-calendar-button-text{color:var(--cc-live-text)}
.cockpit-demo-showcase .cc-work-calendar-icon{background:#fef3c7;color:#92400e;border-color:#f3c76a}
.cockpit-demo-showcase .cc-card--tasks .customer-task-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.cockpit-demo-showcase [data-demo-created-task]{padding-top:8px}
.cockpit-demo-showcase .customer-task-card{
  min-height:170px;
  color:var(--cc-live-text);
  border:1px solid rgba(217,119,6,.28);
  border-radius:12px;
  background:linear-gradient(180deg,#fff8df,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 12px 28px rgba(146,84,18,.12);
}
.cockpit-demo-showcase .customer-task-card.stage-done{border-color:#86d7a1;background:linear-gradient(180deg,#f0fdf4,#fff)}
.cockpit-demo-showcase .customer-task-card.stage-work{border-color:#fdba74;background:linear-gradient(180deg,#fff7ed,#fff)}
.cockpit-demo-showcase .customer-task-preview-top h3{color:var(--cc-live-text);font-size:.61rem;white-space:normal;line-height:1.2}
.cockpit-demo-showcase .customer-task-type-icon{background:#fff0df;color:#ea580c}
.cockpit-demo-showcase .customer-task-preview-mid{color:var(--cc-live-muted)}
.cockpit-demo-showcase .customer-stage-preview span{color:#94a3b8}
.cockpit-demo-showcase .customer-stage-preview span+span:before{border-color:#dbe3ea}
.cockpit-demo-showcase .customer-stage-preview i{border-color:#cbd5e1;background:#f8fafc}
.cockpit-demo-showcase .customer-task-status,
.cockpit-demo-showcase .customer-task-open-label{color:#d97706}
.cockpit-demo-showcase .customer-subtask-mini-list li{font-size:.45rem}
.cockpit-demo-showcase .cc-summary-kpi,
.cockpit-demo-showcase .cc-summary-progress,
.cockpit-demo-showcase .cc-summary-links{color:var(--cc-live-text)}
.cockpit-demo-showcase .cc-summary-kpi strong{color:var(--cc-live-text)}
.cockpit-demo-showcase .cc-summary-kpi span,
.cockpit-demo-showcase .cc-summary-kpi small,
.cockpit-demo-showcase .cc-summary-progress b{color:#94a3b8}
.cockpit-demo-showcase .cc-summary-progress i{background:linear-gradient(90deg,var(--cc-live-orange),var(--cc-live-gold))}
.cockpit-demo-showcase .cc-summary-links{grid-template-columns:1fr;gap:5px}
.cockpit-demo-showcase .cc-summary-links>div{border-color:#edf1f5;background:#fafbfc;color:var(--cc-live-muted)}
.cockpit-demo-showcase .cc-tool-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.cockpit-demo-showcase .cc-tool-links>span{display:grid;grid-template-columns:18px minmax(0,1fr);padding:7px;border:1px solid #edf1f5;border-radius:9px;background:#fffaf2;color:var(--cc-live-text)}
.cockpit-demo-showcase .cc-tool-links i{grid-row:1/3;display:grid;place-items:center;color:#ea580c;font-style:normal}
.cockpit-demo-showcase .cc-tool-links b{font-size:.48rem}
.cockpit-demo-showcase .cc-tool-links small{color:var(--cc-live-muted);font-size:.4rem}
.cockpit-demo-showcase .customer-notifications-minimalist-list{color:var(--cc-live-text)}
.cockpit-demo-showcase .customer-notification-item{padding:10px 0;border-bottom:1px solid #e5e7eb}
.cockpit-demo-showcase .customer-notification-item>i{background:var(--cc-live-green)}
.cockpit-demo-showcase .customer-notification-item strong{color:var(--cc-live-text);font-size:.49rem;line-height:1.25}
.cockpit-demo-showcase .customer-notification-item small{color:var(--cc-live-muted);font-size:.41rem}
.cockpit-demo-showcase [data-demo-populated="true"] .cc-card--activity .cockpit-demo-empty{display:none}
.cockpit-demo-showcase .cockpit-demo-empty strong{color:var(--cc-live-text)}
.cockpit-demo-showcase .cockpit-demo-empty small{color:var(--cc-live-muted)}
.cockpit-demo-showcase .demo-request-overlay .customer-task-modal-dialog{
  width:560px;
  height:auto;
  max-width:calc(100% - 32px);
  max-height:calc(100% - 20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:#fffaf2;
  box-shadow:0 25px 80px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.04);
  transform:none!important;
}
.cockpit-demo-showcase .demo-request-overlay{
  align-items:flex-start;
  padding:28px 16px 0;
  background:rgba(3,6,10,.84);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .customer-task-modal-dialog{
  width:650px;
  height:auto;
  max-width:calc(100% - 32px);
  max-height:calc(100% - 20px);
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-task-modal-dialog{
  width:650px;
  height:auto;
  max-width:calc(100% - 32px);
  max-height:calc(100% - 20px);
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])){align-items:flex-start;padding:28px 16px 0}
.cockpit-demo-showcase .demo-request-overlay:not(:has(.demo-draft-panel:not([hidden]))) .cai-entry-shell{
  width:480px;
  max-width:100%;
  margin:0 auto;
  padding:20px 24px;
}
.cockpit-demo-showcase .demo-request-overlay .cai-head{min-height:78px;padding:14px 18px;border-radius:24px 24px 0 0;background:linear-gradient(135deg,#0a0c10,#131820 50%,#0f1218)}
.cockpit-demo-showcase .demo-request-overlay .cai-entry-shell{width:480px;max-width:100%;margin:0 auto;padding:18px 20px}
.cockpit-demo-showcase .demo-request-overlay .cai-textarea-wrap{min-height:168px;border-radius:18px;background:linear-gradient(135deg,#e8ddd0,#d4c4b0,#e8ddd0);padding:2px}
.cockpit-demo-showcase .demo-request-overlay .demo-request-input{min-height:160px;padding:14px 16px;border-radius:16px;background:#fff;color:var(--cc-live-text);font-size:.92rem;contain:layout paint}
.cockpit-demo-showcase .demo-request-rest{visibility:hidden}
.cockpit-demo-showcase .demo-request-caret{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.12em}
.cockpit-demo-showcase .demo-request-caret::after{position:absolute;top:-.04em;left:2px;width:2px;height:1.15em;background:#eab308;content:'';animation:showcase-focused-caret .72s steps(1) infinite}
.cockpit-demo-showcase .demo-request-input::after,.cockpit-demo-showcase .demo-request-input.is-focused::after{content:none}
.cockpit-demo-showcase .demo-request-input.is-complete .demo-request-caret{display:none}
.cockpit-demo-showcase .demo-request-overlay .demo-request-input{
  transition:border-color 240ms ease,background-color 240ms ease;
}
.cockpit-demo-showcase .demo-request-overlay .demo-request-input.is-focused{
  animation:none!important;
  box-shadow:none;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .customer-task-modal-dialog,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .customer-ai-request-modal-content,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .cai-entry-shell,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .cai-textarea-wrap{
  overflow:visible!important;
}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .customer-task-modal-dialog{width:650px;height:auto;max-width:calc(100% - 32px)}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-entry-shell{width:480px;max-width:100%;margin:0 auto;padding:12px 20px 10px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-brand-row{justify-content:center;margin-bottom:10px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .cai-textarea-wrap{min-height:168px}
.cockpit-demo-showcase .demo-request-overlay:has(.demo-draft-panel:not([hidden])) .demo-request-input{min-height:160px;max-height:160px;padding:14px 16px;font-size:.92rem;line-height:1.6}
.cockpit-demo-showcase .cockpit-demo-pointer{position:absolute;top:0;left:0;z-index:80;width:30px;height:30px;pointer-events:none;opacity:0;transform:translate3d(var(--demo-pointer-x,-36px),var(--demo-pointer-y,-36px),0) scale(1);transform-origin:4px 3px;transition:transform var(--demo-pointer-duration,220ms) cubic-bezier(.22,1,.36,1),opacity 120ms ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,.32))}
.cockpit-demo-showcase .cockpit-demo-pointer svg{display:block;width:30px;height:30px;overflow:visible;transform:rotate(-18deg);fill:#ff6b00;stroke:#151922;stroke-width:1.2;stroke-linejoin:round}
.cockpit-demo-showcase .cockpit-demo-pointer i{position:absolute;top:-8px;left:-8px;width:22px;height:22px;border:3px solid #ff6b00;border-radius:50%;opacity:0;transform:scale(.2)}
.cockpit-demo-showcase .cockpit-demo-pointer.is-visible{opacity:1}
.cockpit-demo-showcase .cockpit-demo-pointer.is-pressing{transform:translate3d(var(--demo-pointer-x),var(--demo-pointer-y),0) scale(.78);transition-duration:100ms}
.cockpit-demo-showcase .cockpit-demo-pointer.is-pressing i{animation:cockpit-demo-pointer-click 220ms cubic-bezier(.1,.8,.3,1) both}
.cockpit-demo-showcase .is-demo-pressed{animation:cockpit-demo-target-press 220ms cubic-bezier(.22,1,.36,1) both}
@keyframes cockpit-demo-pointer-click{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(2.1)}}
@keyframes cockpit-demo-target-press{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(2px) scale(.97);filter:brightness(.94)}}
.cockpit-demo-showcase [data-demo-drafts-panel] .demo-draft-list article.is-focused{
  box-shadow:none;
  outline:3px solid rgba(245,158,11,.24);
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .customer-task-modal-dialog{
  box-shadow:0 0 0 1px rgba(245,158,11,.2);
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .customer-task-modal-dialog,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .customer-ai-request-modal-content,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .customer-ai-studio-grid,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .customer-ai-drafts-panel,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .demo-draft-panel,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .demo-draft-list{
  overflow:visible!important;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .customer-ai-drafts-panel{
  z-index:6;
}

.cockpit-demo-showcase .cc-card--tasks{
  position:relative;
  z-index:1;
  transition:outline-color 220ms ease,box-shadow 320ms ease;
  outline:2px solid transparent;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="queue-summary"] .cc-card--tasks{
  z-index:7;
  outline-color:rgba(245,158,11,.5);
}
.cockpit-demo-showcase .customer-work-calendar-modal{
  background:rgba(3,6,10,.84);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.cockpit-demo-showcase .customer-work-calendar-dialog{border:1px solid #d7dee6;border-radius:18px;background:#fff;color:#0f172a;box-shadow:0 26px 80px rgba(0,0,0,.45)}
.cockpit-demo-showcase .customer-work-calendar-body{grid-template-columns:minmax(0,1fr) 230px}
.cockpit-demo-showcase .customer-work-calendar-day{border-color:#dce4eb;background:#fff}
.cockpit-demo-showcase .customer-work-calendar-day.is-completed{border-color:#bbf7d0;background:#f0fdf4}
.cockpit-demo-showcase .customer-work-calendar-day.is-working{border-color:#f59e0b;background:#fff7ed;box-shadow:0 0 0 1px rgba(245,158,11,.16)}
.cockpit-demo-showcase .customer-work-calendar-day.is-planned{border-color:#cbd5e1;background:#fff}
.cockpit-demo-showcase .customer-work-calendar-day.is-working .customer-work-calendar-chip{color:#9a3412}
.cockpit-demo-showcase .customer-work-calendar-day[data-demo-calendar-date="14"]:not(.is-today).is-completed{border-color:#bbf7d0;background:#f0fdf4;box-shadow:none}
.cockpit-demo-showcase .customer-work-calendar-day[data-demo-calendar-date="14"]:not(.is-today).is-planned{border-color:#cbd5e1;background:#fff;box-shadow:none}
.cockpit-demo-showcase .customer-work-calendar-detail{border-color:#e6ebf0;background:#f8fafc}

/* Keep every scene on one stable dim layer and interpolate product-surface geometry. */
.cockpit-demo-showcase .demo-request-overlay,
.cockpit-demo-showcase .customer-work-calendar-modal{
  isolation:isolate;
  background-color:rgba(3,6,10,.78)!important;
  transition:background-color 540ms cubic-bezier(.22,1,.36,1),opacity 540ms ease;
}
.cockpit-demo-showcase .demo-request-overlay .customer-task-modal-dialog{
  transition:width 420ms cubic-bezier(.22,1,.36,1),height 420ms cubic-bezier(.22,1,.36,1),box-shadow 420ms ease;
}
.cockpit-demo-showcase .demo-request-overlay .cai-entry-shell,
.cockpit-demo-showcase .demo-request-overlay .cai-textarea-wrap,
.cockpit-demo-showcase .demo-request-overlay .demo-request-input{
  transition-property:width,height,min-height,max-height,padding,font-size,border-color,background-color;
  transition-duration:420ms;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.cockpit-demo-showcase .demo-request-overlay.is-handoff{
  will-change:opacity;
}
/* Premium journey rail and responsive product-film finish. */
.cockpit-demo-showcase .cockpit-demo-story{
  min-height:78px;
  margin-bottom:16px;
  padding:12px 20px 15px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,248,239,.9));
  box-shadow:0 14px 34px rgba(15,23,42,.08),inset 0 1px 0 #fff;
}
.cockpit-demo-story__progress{
  height:4px;
  background:linear-gradient(90deg,#ff6b00,#f4b400);
  box-shadow:0 0 10px rgba(255,107,0,.24);
}
.cockpit-demo-showcase .cockpit-demo-canvas{
  border:1px solid rgba(255,255,255,.18);
  border-radius:30px;
  background:radial-gradient(circle at 50% 0,#1c2735 0,#0f141b 52%,#090b0f 100%);
  box-shadow:0 30px 86px rgba(15,23,42,.26),0 0 0 7px rgba(255,255,255,.82),0 0 0 8px rgba(255,107,0,.08);
}
.cockpit-demo-showcase .cockpit-demo-canvas::before{
  content:'';
  position:absolute;
  inset:8px;
  z-index:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:23px;
  pointer-events:none;
}
.cockpit-demo-showcase .cockpit-demo-fit{position:relative;z-index:1}
.cockpit-demo-showcase .cc-bento>*{
  transition:opacity 420ms ease,filter 420ms ease,box-shadow 420ms ease;
}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing"] .cc-bento>* ,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="typing-complete"] .cc-bento>* ,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="analyzing"] .cc-bento>*{opacity:.72;filter:saturate(.78)}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .cc-card--automations,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="draft-summary"] .cc-card--automations,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="drafting"] .cc-right-stack,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="draft-summary"] .cc-right-stack{opacity:.64;filter:saturate(.72)}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="task-update"] .cc-card--automations,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="queue-summary"] .cc-card--automations,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="calendar-opening"] .cc-card--automations,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="calendar-filling"] .cc-card--automations{opacity:.72;filter:saturate(.8)}
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="task-update"] .cc-card--tasks,
.cockpit-demo-showcase .cockpit-demo-canvas[data-demo-state="queue-summary"] .cc-card--tasks{box-shadow:0 0 0 2px rgba(245,158,11,.24),0 18px 36px rgba(245,158,11,.12)}

@media(max-width:720px){
  .cockpit-demo-showcase .cockpit-demo-story{min-height:0;padding:12px 13px 15px;border-radius:17px}
}
@media(prefers-reduced-motion:reduce){
  .cockpit-demo-story__progress,.cockpit-demo-showcase .cc-bento>*{transition:none!important}
}

/* The showcase rail is now a single live status line; the full process story stays above it. */
.cockpit-demo-showcase .cockpit-demo-story--live{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:76px;
  padding:16px 22px 20px;
  border-color:rgba(255,107,0,.28);
  border-radius:18px;
  background:radial-gradient(circle at 50% 0,rgba(255,107,0,.1),transparent 58%),linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,247,239,.94));
  box-shadow:0 16px 36px rgba(255,107,0,.09),0 8px 24px rgba(15,23,42,.06),inset 0 1px 0 #fff;
}
.cockpit-demo-live-copy{display:flex;align-items:center;justify-content:center;gap:.34em;width:100%;min-width:0;font-size:clamp(1.05rem,1.55vw,1.3rem);font-weight:850;letter-spacing:-.015em;text-align:center}
.cockpit-demo-live-copy span{flex:none;color:#111827;font-weight:800;transition:color 280ms ease}
.cockpit-demo-live-copy strong{max-width:100%;overflow:hidden;color:#ff6b00;font:inherit;font-weight:900;text-shadow:0 5px 18px rgba(255,107,0,.16);text-overflow:ellipsis;white-space:nowrap;transition:color 280ms ease,opacity 280ms ease,text-shadow 280ms ease,transform 280ms ease}
.cockpit-demo-story--live[data-status-tone="success"] .cockpit-demo-live-copy span,
.cockpit-demo-story--live[data-status-tone="success"] .cockpit-demo-live-copy strong{color:#16a34a;text-shadow:0 5px 18px rgba(22,163,74,.16)}
.cockpit-demo-live-copy strong.is-changing{opacity:.38;transform:translateY(3px) scale(.985)}
.cockpit-demo-story--live .cockpit-demo-story__progress{height:4px;box-shadow:0 -4px 14px rgba(255,107,0,.2)}
@media(max-width:720px){
  .cockpit-demo-showcase .cockpit-demo-story--live{align-items:center;min-height:66px;padding:13px 13px 16px}
  .cockpit-demo-live-copy{width:100%}
  .cockpit-demo-live-copy{font-size:.92rem;line-height:1.3}
  .cockpit-demo-live-copy strong{max-width:calc(100% - 68px);white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .cockpit-demo-story.is-progressing .cockpit-demo-story__progress{animation:none}
  .cockpit-demo-live-copy span,
  .cockpit-demo-live-copy strong{transition:none}
  .cockpit-demo-showcase .cockpit-demo-pointer{display:none}
  .cockpit-demo-showcase .is-demo-pressed{animation:none}
}

/* Homepage first paint: keep only the root landing page on the static path. */
.homepage .chart-bar{transition:none}
.homepage .dashboard-mockup{transition:none}
.homepage .header,
.homepage .header.scrolled{
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none;
  transition:none!important;
}
.homepage .header .container,
.homepage .header .nav,
.homepage .header .hamburger{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:none!important;
}
.homepage .header-login{transition:none!important}