/* ============================================================
   Centara Hero — Full production build
   Kireçtaşı palette · OKLCH · Animated mockups · Responsive
   ============================================================ */
:root {
  --bg:oklch(96% 0.008 80);--surface:oklch(93% 0.006 80);--surface-alt:oklch(89% 0.008 80);
  --border:oklch(85% 0.01 80);--border-soft:oklch(90% 0.006 80);
  --ink:oklch(22% 0.01 260);--ink-mid:oklch(42% 0.01 260);--ink-muted:oklch(55% 0.012 260);
  --accent:oklch(48% 0.1 175);--accent-hover:oklch(42% 0.11 175);
  --accent-soft:oklch(48% 0.1 175/0.08);--accent-ring:oklch(48% 0.1 175/0.2);
  --sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-48:48px;--sp-64:64px;--sp-96:96px;--sp-128:128px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;
  --shadow-sm:0 1px 3px oklch(22% 0.01 260/0.06);--shadow-md:0 4px 16px oklch(22% 0.01 260/0.07);
  --shadow-lg:0 12px 40px oklch(22% 0.01 260/0.09);--shadow-xl:0 24px 64px oklch(22% 0.01 260/0.12);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-quart:cubic-bezier(.25,1,.5,1);
  --dur-fast:150ms;--dur-norm:250ms;--dur-slow:500ms;
  --mock-bg:oklch(16% 0.02 260);--mock-surface:oklch(19% 0.02 260);--mock-raised:oklch(23% 0.025 260);
  --mock-border:oklch(28% 0.03 255);--mock-text:oklch(90% 0.005 260);--mock-muted:oklch(65% 0.02 260);
  --mock-accent:oklch(52% 0.2 264);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:var(--sp-16) var(--sp-32);background:oklch(96% 0.008 80/0.85);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:var(--sp-12)}
.brand img{height:48px;width:auto;object-fit:contain;filter:drop-shadow(0 1px 3px oklch(22% 0.01 260/0.12))}
.header-nav{display:flex;align-items:center;gap:var(--sp-32)}
.header-nav a{font-size:.9375rem;font-weight:500;color:var(--ink-muted);transition:color var(--dur-fast) var(--ease-out)}
.header-nav a:hover{color:var(--ink)}
.btn-ghost{display:inline-flex;align-items:center;padding:var(--sp-8) var(--sp-16);border:1px solid var(--border);border-radius:var(--r-sm);font-size:.875rem;font-weight:600;color:var(--ink);background:0 0;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.btn-ghost:hover{border-color:var(--ink-muted);background:var(--surface)}
.btn-ghost:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-24);background:var(--accent);color:oklch(98% 0.005 175);border:none;border-radius:var(--r-sm);font-family:inherit;font-size:.9375rem;font-weight:700;cursor:pointer;box-shadow:0 2px 8px var(--accent-ring);transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 20px var(--accent-ring);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{display:inline-flex;align-items:center;padding:var(--sp-12) var(--sp-24);background:0 0;color:var(--ink);border:1px solid var(--border);border-radius:var(--r-sm);font-family:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.btn-secondary:hover{border-color:var(--ink-muted);background:var(--surface)}

/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */
.hero{max-width:1200px;margin:0 auto;padding:var(--sp-64) var(--sp-32) var(--sp-128);display:grid;grid-template-columns:1fr 540px;gap:var(--sp-64);align-items:center}
.hero-content{max-width:540px}
.hero-kicker{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4) var(--sp-12);background:var(--accent-soft);border-radius:var(--r-sm);font-size:.8125rem;font-weight:600;color:var(--accent);letter-spacing:.02em;margin-bottom:var(--sp-24)}
.hero-title{font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance;margin-bottom:var(--sp-24)}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-subtitle{font-size:1.125rem;line-height:1.65;color:var(--ink-muted);max-width:48ch;margin-bottom:var(--sp-32)}
.cta-row{display:flex;gap:var(--sp-12);flex-wrap:wrap}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--sp-24);margin-top:var(--sp-32)}
.trust-item{display:inline-flex;align-items:center;gap:var(--sp-8);font-size:.8125rem;font-weight:500;color:var(--ink-muted)}
.trust-item svg{color:var(--accent);flex-shrink:0}

/* ── Hero Mockup ── */
.hero-visual{position:relative}
.mockup{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--mock-bg);box-shadow:var(--shadow-xl)}
.mockup-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--mock-surface);border-bottom:1px solid var(--mock-border)}
.mockup-chrome .dot{width:8px;height:8px;border-radius:50%;background:var(--mock-border)}
.mockup-url,.mini-url{margin-left:var(--sp-12);font-size:.6875rem;color:var(--mock-muted);background:var(--mock-raised);padding:3px 10px;border-radius:4px}
.mockup-body{display:grid;grid-template-columns:140px 1fr;min-height:360px}
.mock-sidebar{background:var(--mock-surface);border-right:1px solid var(--mock-border);padding:var(--sp-16) var(--sp-12);display:flex;flex-direction:column}
.mock-logo{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-24)}
.mock-logo-icon{width:20px;height:20px;border-radius:5px;background:var(--mock-accent)}
.mock-logo-text{height:8px;width:52px;border-radius:3px;background:var(--mock-muted);opacity:.3}
.mock-nav-items{display:flex;flex-direction:column;gap:4px;flex:1}
.mock-nav-item{display:flex;align-items:center;gap:var(--sp-8);padding:7px 10px;border-radius:5px}
.mock-nav-item.active{background:var(--mock-accent)}
.mock-nav-dot{width:6px;height:6px;border-radius:2px;background:var(--mock-muted);opacity:.4;flex-shrink:0}
.mock-nav-item.active .mock-nav-dot{background:var(--mock-text);opacity:.8}
.mock-nav-label{height:5px;border-radius:2px;background:var(--mock-muted);opacity:.2}
.mock-nav-item.active .mock-nav-label{background:var(--mock-text);opacity:.5}
.mock-sidebar-footer{display:flex;align-items:center;gap:var(--sp-8);margin-top:auto;padding-top:var(--sp-16);border-top:1px solid var(--mock-border)}
.mock-avatar{width:22px;height:22px;border-radius:50%;background:var(--mock-raised);border:1px solid var(--mock-border)}
.mock-main{padding:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-12)}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.mock-stat-card{background:var(--mock-surface);border:1px solid var(--mock-border);border-radius:8px;padding:10px}
.mock-stat-number{font-size:1.25rem;font-weight:800;color:var(--mock-text);line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.mock-stat-sublabel{font-size:.5625rem;color:var(--mock-muted);margin-bottom:6px;letter-spacing:.02em}
.mock-stat-bar{height:3px;background:var(--mock-raised);border-radius:2px;overflow:hidden}
.mock-stat-fill{height:100%;border-radius:2px;width:0%;transition:width 1.2s var(--ease-quart)}
.mock-table{background:var(--mock-surface);border:1px solid var(--mock-border);border-radius:8px;overflow:hidden;flex:1}
.mock-table-header{display:flex;gap:var(--sp-8);padding:8px 10px;border-bottom:1px solid var(--mock-border)}
.mock-th{height:4px;border-radius:2px;background:var(--mock-muted);opacity:.25}
.mock-table-row{display:flex;align-items:center;gap:var(--sp-8);padding:7px 10px;border-bottom:1px solid oklch(28% 0.02 255/0.5);font-size:.625rem}
.mock-table-row:last-child{border-bottom:none}
.mock-td-text{color:var(--mock-text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-td-text.dim{color:var(--mock-muted);font-weight:400}
.mock-td-text.priority{font-size:.5rem;padding:1px 5px;border-radius:3px;font-weight:600}
.mock-td-text.priority.high{background:oklch(68% 0.18 25/0.15);color:oklch(68% 0.18 25)}
.mock-td-text.priority.med{background:oklch(82% 0.16 85/0.15);color:oklch(72% 0.16 85)}
.mock-td-text.priority.low{background:oklch(72% 0.14 250/0.15);color:oklch(65% 0.14 250)}
.mock-badge{font-size:.5rem;padding:2px 6px;border-radius:3px;font-weight:600;white-space:nowrap}
.mock-badge.open{background:oklch(75% 0.15 165/0.15);color:oklch(75% 0.15 165);border:1px solid oklch(75% 0.15 165/0.25)}
.mock-badge.progress{background:oklch(72% 0.14 250/0.15);color:oklch(72% 0.14 250);border:1px solid oklch(72% 0.14 250/0.25)}
.mock-badge.waiting{background:oklch(82% 0.16 85/0.15);color:oklch(75% 0.16 85);border:1px solid oklch(82% 0.16 85/0.25)}
.row-anim{opacity:0;transform:translateX(-8px)}
.mockup.animated .row-anim{animation:rowSlide .4s var(--ease-out) forwards}
.mockup.animated .row-anim:nth-child(2){animation-delay:.12s}
.mockup.animated .row-anim:nth-child(3){animation-delay:.24s}
.mockup.animated .row-anim:nth-child(4){animation-delay:.36s}
.mockup.animated .row-anim:nth-child(5){animation-delay:.48s}
.mockup.animated .row-anim:nth-child(6){animation-delay:.6s}
@keyframes rowSlide{to{opacity:1;transform:translateX(0)}}

/* Floating elements */
.float-notif{position:absolute;top:25%;right:-16px;display:flex;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-12);background:oklch(98% 0.005 80);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);width:210px;z-index:2}
.float-notif-icon{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.float-notif-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.float-notif-title{font-size:.75rem;font-weight:700;color:var(--ink)}
.float-notif-sub{font-size:.6875rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-badge{position:absolute;bottom:14%;left:-12px;display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);background:oklch(98% 0.005 80);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-md);font-size:.75rem;font-weight:700;color:var(--ink);z-index:2}
.float-badge-dot{width:8px;height:8px;border-radius:50%;background:oklch(65% 0.15 145)}
.float-anim{opacity:0;transform:translateY(12px) scale(.96)}
.hero-visual.visible .float-anim{animation:floatIn .5s var(--ease-out) .4s forwards}
@keyframes floatIn{to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:no-preference){
  .hero-visual.visible .float-notif{animation:floatIn .5s var(--ease-out) .4s forwards,gentleFloat 4s ease-in-out 1.2s infinite}
  .hero-visual.visible .float-badge{animation:floatIn .5s var(--ease-out) .6s forwards,gentleFloat 5s ease-in-out 1.8s infinite}
}
@keyframes gentleFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1)}}

/* ══════════════════════════════════════
   SECTION LABELS
   ══════════════════════════════════════ */
.section-label{font-size:.8125rem;font-weight:700;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-12)}
.section-heading{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;max-width:30ch;margin-bottom:var(--sp-48)}

/* ══════════════════════════════════════
   MODULE SHOWCASE SECTIONS
   ══════════════════════════════════════ */
.modules{max-width:1200px;margin:0 auto;padding:0 var(--sp-32) var(--sp-64)}
.module-showcase{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--sp-48);align-items:center;margin-bottom:var(--sp-96)}
.module-showcase--reverse{direction:rtl}
.module-showcase--reverse>*{direction:ltr}
.module-info{display:flex;flex-direction:column}
.module-icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--icon-bg);color:var(--icon-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--sp-16)}
.module-num{font-size:.75rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:var(--sp-8)}
.module-title{font-size:1.5rem;font-weight:800;margin-bottom:var(--sp-12);line-height:1.2;letter-spacing:-.01em}
.module-desc{font-size:1rem;color:var(--ink-muted);line-height:1.65;max-width:48ch;margin-bottom:var(--sp-16)}
.module-features{display:flex;flex-direction:column;gap:var(--sp-8)}
.module-features li{font-size:.875rem;font-weight:500;color:var(--ink-mid);display:flex;align-items:center;gap:var(--sp-8)}
.module-features li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ── Mini Mockups (Module detail) ── */
.mini-mockup{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--mock-bg);box-shadow:var(--shadow-lg)}
.mini-chrome{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--mock-surface);border-bottom:1px solid var(--mock-border)}
.mini-chrome .dot{width:7px;height:7px;border-radius:50%;background:var(--mock-border)}
.mini-body{padding:var(--sp-16)}

/* Ticket detail mockup */
.ticket-detail{display:flex;flex-direction:column;gap:var(--sp-12)}
.ticket-header-row{display:flex;align-items:center;gap:var(--sp-8)}
.ticket-id{font-size:.8125rem;font-weight:800;color:var(--mock-text);font-variant-numeric:tabular-nums}
.ticket-priority{font-size:.5625rem;padding:2px 6px;border-radius:3px;font-weight:700;margin-left:auto}
.ticket-priority.high{background:oklch(68% 0.18 25/0.15);color:oklch(70% 0.18 25)}
.ticket-title-text{font-size:.875rem;font-weight:600;color:var(--mock-text)}
.ticket-meta-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8)}
.ticket-meta{display:flex;flex-direction:column;gap:2px}
.meta-label{font-size:.5rem;color:var(--mock-muted);text-transform:uppercase;letter-spacing:.05em}
.meta-value{font-size:.6875rem;color:var(--mock-text);font-weight:500}
.meta-value.sla-ok{color:oklch(75% 0.15 165)}
.ticket-timeline{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--mock-border);margin-left:6px;padding-left:var(--sp-16)}
.tl-item{display:flex;align-items:center;gap:var(--sp-8);padding:6px 0;position:relative}
.tl-dot{width:8px;height:8px;border-radius:50%;position:absolute;left:calc(-20px - 4px);flex-shrink:0}
.tl-dot.created{background:oklch(72% 0.14 250)}
.tl-dot.assigned{background:var(--mock-accent)}
.tl-dot.comment{background:oklch(82% 0.16 85)}
.tl-dot.progress{background:oklch(75% 0.15 165)}
.tl-text{font-size:.6875rem;color:var(--mock-text);flex:1}
.tl-time{font-size:.5625rem;color:var(--mock-muted);font-variant-numeric:tabular-nums}
.tl-anim{opacity:0;transform:translateY(6px)}
.mock-trigger.animated .tl-anim{animation:rowSlide .35s var(--ease-out) forwards}
.mock-trigger.animated .tl-anim:nth-child(1){animation-delay:.1s}
.mock-trigger.animated .tl-anim:nth-child(2){animation-delay:.25s}
.mock-trigger.animated .tl-anim:nth-child(3){animation-delay:.4s}
.mock-trigger.animated .tl-anim:nth-child(4){animation-delay:.55s}

/* Inventory mockup */
.inv-grid{display:flex;flex-direction:column;gap:var(--sp-8)}
.inv-card{background:var(--mock-surface);border:1px solid var(--mock-border);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:28px 1fr;gap:8px 10px;align-items:center}
.inv-icon{font-size:1.1rem;text-align:center}
.inv-info{display:flex;justify-content:space-between;align-items:baseline}
.inv-name{font-size:.75rem;font-weight:600;color:var(--mock-text)}
.inv-count{font-size:.6875rem;color:var(--mock-muted)}
.inv-count strong{color:var(--mock-text);font-weight:700}
.inv-bar{grid-column:1/-1;height:3px;background:var(--mock-raised);border-radius:2px;overflow:hidden}
.inv-fill{height:100%;border-radius:2px;width:0;transition:width 1s var(--ease-quart)}
.inv-status{grid-column:1/-1;font-size:.5625rem;color:var(--mock-muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.inv-dot{width:5px;height:5px;border-radius:50%;margin-left:4px}
.inv-dot.active{background:oklch(75% 0.15 165)}
.inv-dot.stock{background:oklch(82% 0.16 85)}
.inv-dot.warning{background:oklch(68% 0.18 25)}
.inv-anim{opacity:0;transform:translateY(8px)}
.mock-trigger.animated .inv-anim{animation:rowSlide .4s var(--ease-out) forwards}
.mock-trigger.animated .inv-anim:nth-child(1){animation-delay:.05s}
.mock-trigger.animated .inv-anim:nth-child(2){animation-delay:.15s}
.mock-trigger.animated .inv-anim:nth-child(3){animation-delay:.25s}
.mock-trigger.animated .inv-anim:nth-child(4){animation-delay:.35s}
.mock-trigger.animated .inv-anim:nth-child(5){animation-delay:.45s}

/* HR mockup */
.hr-panel{display:flex;flex-direction:column;gap:var(--sp-12)}
.hr-profile{display:flex;align-items:center;gap:var(--sp-12)}
.hr-avatar{width:36px;height:36px;border-radius:50%;background:oklch(68% 0.12 250/0.2);color:oklch(68% 0.12 250);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;border:1px solid oklch(68% 0.12 250/0.3)}
.hr-info{display:flex;flex-direction:column}
.hr-name{font-size:.8125rem;font-weight:700;color:var(--mock-text)}
.hr-role{font-size:.625rem;color:var(--mock-muted)}
.hr-leave-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.hr-leave-card{background:var(--mock-surface);border:1px solid var(--mock-border);border-radius:8px;padding:10px}
.hr-leave-type{font-size:.625rem;color:var(--mock-muted);margin-bottom:6px;font-weight:500}
.hr-leave-bar{height:4px;background:var(--mock-raised);border-radius:2px;overflow:hidden;margin-bottom:4px}
.hr-leave-fill{height:100%;border-radius:2px;width:0;transition:width 1s var(--ease-quart)}
.hr-leave-nums{font-size:.625rem;color:var(--mock-text);display:flex;justify-content:space-between}
.hr-leave-nums .dim{color:var(--mock-muted)}
.hr-pending{background:var(--mock-surface);border:1px solid var(--mock-border);border-radius:8px;padding:10px}
.hr-pending-title{font-size:.6875rem;font-weight:700;color:var(--mock-text);margin-bottom:var(--sp-8)}
.hr-req{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--mock-border);gap:var(--sp-8)}
.hr-req:last-child{border-bottom:none}
.hr-req-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.hr-req-name{font-size:.6875rem;font-weight:600;color:var(--mock-text)}
.hr-req-detail{font-size:.5625rem;color:var(--mock-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-req-actions{display:flex;gap:4px;flex-shrink:0}
.hr-btn{font-size:.5rem;padding:3px 8px;border-radius:4px;border:none;font-weight:700;letter-spacing:.02em}
.hr-btn.approve{background:oklch(75% 0.15 165/0.15);color:oklch(55% 0.15 165)}
.hr-btn.reject{background:oklch(68% 0.18 25/0.1);color:oklch(55% 0.18 25)}
.hr-anim{opacity:0;transform:translateY(6px)}
.mock-trigger.animated .hr-anim{animation:rowSlide .4s var(--ease-out) forwards}
.mock-trigger.animated .hr-anim:nth-child(1){animation-delay:.05s}
.mock-trigger.animated .hr-anim:nth-child(2){animation-delay:.15s}
.mock-trigger.animated .hr-anim:nth-child(3){animation-delay:.2s}
.mock-trigger.animated .hr-anim:nth-child(4){animation-delay:.3s}

/* ── AD Section (kapsamlı) ── */
.ad-section-wrap{max-width:1200px;margin:0 auto;padding:var(--sp-96) var(--sp-32)}
.ad-section-wrap,.ad-section-wrap *{opacity:1!important;transform:none!important;visibility:visible!important}
.ad-section-header{margin-bottom:var(--sp-48)}
.ad-tabs-wrap{margin-bottom:var(--sp-48)}

.ad-mockup-full{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--mock-bg);box-shadow:var(--shadow-xl)}
.ad-mock-content{padding:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-12)}

/* AD topbar */
.ad-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);flex-wrap:wrap}
.ad-search-bar{display:flex;align-items:center;gap:var(--sp-8);background:var(--mock-raised);border:1px solid var(--mock-border);border-radius:6px;padding:8px 12px;flex:1;max-width:340px;color:var(--mock-muted);font-size:.75rem}
.ad-search-bar svg{flex-shrink:0;opacity:.5}
.ad-sync-badge{display:flex;align-items:center;gap:var(--sp-8);font-size:.6875rem;color:var(--mock-muted)}
.ad-sync-badge strong{color:var(--mock-text)}
.ad-sync-pulse{width:8px;height:8px;border-radius:50%;background:oklch(75% 0.15 165);flex-shrink:0}
@media(prefers-reduced-motion:no-preference){.ad-sync-pulse{animation:pulse 2s ease-in-out infinite}}

/* AD split layout */
.ad-split{display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--mock-border);border-radius:8px;overflow:hidden;min-height:260px}

/* AD tree panel */
.ad-tree-panel{background:var(--mock-surface);border-right:1px solid var(--mock-border);padding:var(--sp-12)}
.ad-tree-title{font-size:.625rem;font-weight:700;color:var(--mock-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-8)}
.ad-tree-list{display:flex;flex-direction:column;gap:1px}
.ad-node{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:4px;font-size:.6875rem;color:var(--mock-text);cursor:default;transition:background var(--dur-fast) var(--ease-out)}
.ad-node:hover{background:var(--mock-raised)}
.ad-node--root{font-weight:700}
.ad-node--open{font-weight:600}
.ad-node--child{padding-left:28px}
.ad-node--collapsed{opacity:.6}
.ad-node-arrow{font-size:.5rem;width:10px;text-align:center;flex-shrink:0;color:var(--mock-muted)}
.ad-node-icon{font-size:.7rem;flex-shrink:0}
.ad-node-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-node-badge{font-size:.5625rem;background:var(--mock-raised);color:var(--mock-muted);padding:1px 6px;border-radius:3px;font-weight:600;flex-shrink:0}

/* AD user panel */
.ad-user-panel{background:var(--mock-bg);padding:var(--sp-12)}
.ad-user-panel-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-8)}
.ad-user-panel-title{font-size:.75rem;font-weight:700;color:var(--mock-text)}
.ad-user-panel-count{font-size:.625rem;color:var(--mock-muted)}
.ad-user-table{display:flex;flex-direction:column;gap:0}
.ad-user-row{display:grid;grid-template-columns:1.6fr 1fr .8fr .7fr 30px;gap:var(--sp-8);align-items:center;padding:6px 0;border-bottom:1px solid oklch(28% 0.02 255/0.4);font-size:.6875rem}
.ad-user-row:last-child{border-bottom:none}
.ad-user-row--header{font-size:.5625rem;font-weight:700;color:var(--mock-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--mock-border);padding-bottom:6px}
.ad-u-name{display:flex;align-items:center;gap:6px;color:var(--mock-text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-u-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;flex-shrink:0}
.ad-u-account{color:var(--mock-muted);font-size:.625rem;font-family:monospace}
.ad-u-role{display:flex}
.ad-role-tag{font-size:.5rem;padding:2px 6px;border-radius:3px;font-weight:700;letter-spacing:.03em}
.ad-role-tag.admin{background:oklch(68% 0.18 25/0.12);color:oklch(70% 0.18 25)}
.ad-role-tag.member{background:oklch(72% 0.14 250/0.12);color:oklch(65% 0.14 250)}
.ad-role-tag.enduser{background:oklch(82% 0.16 85/0.12);color:oklch(72% 0.16 85)}
.ad-u-status{display:flex;align-items:center;gap:4px;font-size:.625rem;color:var(--mock-muted);white-space:nowrap}
.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.status-dot.active{background:oklch(75% 0.15 165)}
.status-dot.away{background:oklch(82% 0.16 85)}
.status-dot.disabled{background:oklch(55% 0.01 260)}
.ad-u-actions{color:var(--mock-muted);text-align:center;cursor:default;font-size:.875rem}

/* AD bottom panels */
.ad-bottom-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.ad-mini-panel{background:var(--mock-surface);border:1px solid var(--mock-border);border-radius:8px;padding:var(--sp-12)}
.ad-mini-title{font-size:.6875rem;font-weight:700;color:var(--mock-text);margin-bottom:var(--sp-8);padding-bottom:6px;border-bottom:1px solid var(--mock-border)}
.ad-action-row{display:flex;align-items:flex-start;gap:var(--sp-8);padding:6px 0;border-bottom:1px solid oklch(28% 0.02 255/0.3)}
.ad-action-row:last-child{border-bottom:none}
.ad-action-icon{font-size:.8rem;flex-shrink:0;margin-top:1px}
.ad-action-info{display:flex;flex-direction:column;gap:1px}
.ad-action-name{font-size:.6875rem;font-weight:600;color:var(--mock-text)}
.ad-action-sub{font-size:.5625rem;color:var(--mock-muted);line-height:1.3}
.ad-audit-row{display:flex;align-items:center;gap:var(--sp-8);padding:5px 0;border-bottom:1px solid oklch(28% 0.02 255/0.3);font-size:.625rem}
.ad-audit-row:last-child{border-bottom:none}
.ad-audit-time{color:var(--mock-muted);font-variant-numeric:tabular-nums;width:32px;flex-shrink:0;font-weight:500}
.ad-audit-text{color:var(--mock-text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-audit-who{color:var(--mock-muted);font-size:.5625rem;flex-shrink:0;font-style:italic}

/* AD features grid */
.ad-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16)}
.ad-feature-item{display:flex;gap:var(--sp-12);align-items:flex-start;padding:var(--sp-24);border-radius:var(--r-md);border:1px solid var(--border-soft);background:var(--surface);transition:border-color var(--dur-norm) var(--ease-out),box-shadow var(--dur-norm) var(--ease-out)}
.ad-feature-item:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}
.ad-feature-item svg{flex-shrink:0;color:var(--accent);margin-top:2px}
.ad-feature-item div{display:flex;flex-direction:column;gap:4px}
.ad-feature-item strong{font-size:.9375rem}
.ad-feature-item span{font-size:.8125rem;color:var(--ink-muted);line-height:1.45}

/* ══════════════════════════════════════
   WORKFLOWS
   ══════════════════════════════════════ */
.workflows{background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:var(--sp-128) 0}
.workflows-inner{max-width:1200px;margin:0 auto;padding:0 var(--sp-32)}
.workflow-block{margin-bottom:var(--sp-96)}
.workflow-block:last-child{margin-bottom:0}
.workflow-title{font-size:1.25rem;font-weight:700;margin-bottom:var(--sp-8)}
.workflow-desc{font-size:.9375rem;color:var(--ink-muted);max-width:56ch;line-height:1.6;margin-bottom:var(--sp-32)}

/* RBAC Grid */
.rbac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-12)}
.rbac-card{padding:var(--sp-24) var(--sp-16);border-radius:var(--r-md);border:1px solid var(--border-soft);background:var(--bg);transition:border-color var(--dur-norm) var(--ease-out),box-shadow var(--dur-norm) var(--ease-out)}
.rbac-card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}
.rbac-badge{display:inline-block;font-size:.5625rem;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:.05em;margin-bottom:var(--sp-12)}
.rbac-badge.admin{background:oklch(68% 0.18 25/0.1);color:oklch(55% 0.18 25)}
.rbac-badge.manager{background:oklch(72% 0.14 60/0.1);color:oklch(55% 0.14 60)}
.rbac-badge.member{background:oklch(68% 0.12 250/0.1);color:oklch(50% 0.12 250)}
.rbac-badge.enduser{background:var(--accent-soft);color:var(--accent)}
.rbac-name{font-size:.875rem;font-weight:700;margin-bottom:var(--sp-16)}
.rbac-perms{display:flex;flex-direction:column;gap:var(--sp-8)}
.rbac-perm{font-size:.75rem;display:flex;align-items:center;gap:var(--sp-8);padding:4px 0}
.rbac-perm::before{content:'';width:14px;height:14px;border-radius:50%;flex-shrink:0;background-size:10px;background-repeat:no-repeat;background-position:center}
.rbac-perm.granted::before{background-color:oklch(75% 0.15 165/0.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%2334d399' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rbac-perm.granted{color:var(--ink-mid)}
.rbac-perm.denied::before{background-color:oklch(68% 0.18 25/0.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3l-4 4' stroke='%23f87171' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.rbac-perm.denied{color:var(--ink-muted);opacity:.7}
.rbac-anim{opacity:0;transform:translateY(12px)}
.workflow-block.visible .rbac-anim{animation:rowSlide .4s var(--ease-out) forwards}
.workflow-block.visible .rbac-anim:nth-child(1){animation-delay:.05s}
.workflow-block.visible .rbac-anim:nth-child(2){animation-delay:.15s}
.workflow-block.visible .rbac-anim:nth-child(3){animation-delay:.25s}
.workflow-block.visible .rbac-anim:nth-child(4){animation-delay:.35s}

/* Approval Flow */
.approval-flow{display:flex;align-items:flex-start;gap:0;flex-wrap:wrap}
.approval-step{display:flex;align-items:flex-start;gap:var(--sp-12)}
.approval-node{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--border)}
.approval-node.done{background:oklch(75% 0.15 165/0.15);border-color:oklch(75% 0.15 165);color:oklch(55% 0.15 165)}
.approval-node.active{background:var(--accent-soft);border-color:var(--accent);position:relative}
.approval-node.pending{background:var(--surface-alt);border-color:var(--border)}
.pulse-ring{width:8px;height:8px;border-radius:50%;background:var(--accent)}
@media(prefers-reduced-motion:no-preference){.pulse-ring{animation:pulse 2s ease-in-out infinite}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-ring)}50%{box-shadow:0 0 0 8px oklch(48% 0.1 175/0)}}
.approval-connector{width:40px;height:2px;background:var(--border);align-self:16px;margin-top:15px}
.approval-connector.pending{background:repeating-linear-gradient(90deg,var(--border) 0 4px,transparent 4px 8px)}
.approval-info{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.approval-role{font-size:.75rem;font-weight:700;color:var(--ink)}
.approval-action{font-size:.6875rem;color:var(--ink-muted)}
.approval-who{font-size:.625rem;color:var(--ink-muted);opacity:.7}
.approval-anim{opacity:0;transform:translateX(-8px)}
.workflow-block.visible .approval-anim{animation:rowSlide .4s var(--ease-out) forwards}
.workflow-block.visible .approval-anim:nth-child(1){animation-delay:.1s}
.workflow-block.visible .approval-anim:nth-child(2){animation-delay:.25s}
.workflow-block.visible .approval-anim:nth-child(3){animation-delay:.4s}
.workflow-block.visible .approval-anim:nth-child(4){animation-delay:.55s}
.workflow-block.visible .approval-anim:nth-child(5){animation-delay:.7s}
.workflow-block.visible .approval-anim:nth-child(6){animation-delay:.85s}
.workflow-block.visible .approval-anim:nth-child(7){animation-delay:1s}

/* Notification Stream */
.notif-stream{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--border-soft);margin-left:var(--sp-16);padding-left:var(--sp-24)}
.notif-item{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) 0;border-bottom:1px solid var(--border-soft);position:relative}
.notif-item:last-child{border-bottom:none}
.notif-time{font-size:.6875rem;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums;width:36px;flex-shrink:0}
.notif-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;position:absolute;left:calc(-30px - 5px)}
.notif-dot.assign{background:oklch(52% 0.2 264)}
.notif-dot.comment{background:oklch(82% 0.16 85)}
.notif-dot.approve{background:oklch(75% 0.15 165)}
.notif-dot.status{background:oklch(65% 0.15 145)}
.notif-dot.sla{background:oklch(68% 0.18 25)}
.notif-content{font-size:.875rem;color:var(--ink-mid);line-height:1.4}
.notif-content strong{color:var(--ink);font-weight:600}
.notif-anim{opacity:0;transform:translateX(-8px)}
.workflow-block.visible .notif-anim{animation:rowSlide .35s var(--ease-out) forwards}
.workflow-block.visible .notif-anim:nth-child(1){animation-delay:.1s}
.workflow-block.visible .notif-anim:nth-child(2){animation-delay:.22s}
.workflow-block.visible .notif-anim:nth-child(3){animation-delay:.34s}
.workflow-block.visible .notif-anim:nth-child(4){animation-delay:.46s}
.workflow-block.visible .notif-anim:nth-child(5){animation-delay:.58s}

/* ══════════════════════════════════════
   CAPABILITIES
   ══════════════════════════════════════ */
.capabilities{max-width:1200px;margin:0 auto;padding:var(--sp-128) var(--sp-32)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16)}
.cap-card{padding:var(--sp-32) var(--sp-24);border-radius:var(--r-md);border:1px solid var(--border-soft);background:var(--bg);transition:border-color var(--dur-norm) var(--ease-out),box-shadow var(--dur-norm) var(--ease-out),background var(--dur-norm) var(--ease-out)}
.cap-card:hover{border-color:var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.cap-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-16)}
.cap-title{font-size:1rem;font-weight:700;margin-bottom:var(--sp-8)}
.cap-desc{font-size:.875rem;color:var(--ink-muted);line-height:1.55}

/* ── CTA BANNER ── */
.cta-banner{max-width:1200px;margin:0 auto;padding:0 var(--sp-32) var(--sp-128)}
.cta-banner-inner{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:var(--sp-64) var(--sp-48);text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-banner-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--sp-12)}
.cta-banner-desc{font-size:1.0625rem;color:var(--ink-muted);margin-bottom:var(--sp-32);max-width:40ch}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--border-soft);padding:var(--sp-32)}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-16)}
.footer-brand{display:flex;align-items:center;gap:var(--sp-8);font-weight:600;font-size:.875rem;color:var(--ink-mid)}
.footer-brand img{height:32px;width:auto;filter:drop-shadow(0 1px 2px oklch(22% 0.01 260/0.1))}
.footer-links{display:flex;gap:var(--sp-24)}
.footer-links a{font-size:.8125rem;color:var(--ink-muted);transition:color var(--dur-fast) var(--ease-out)}
.footer-links a:hover{color:var(--ink)}
.footer-copy{font-size:.75rem;color:var(--ink-muted);width:100%;text-align:center;margin-top:var(--sp-16);padding-top:var(--sp-16);border-top:1px solid var(--border-soft)}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;gap:var(--sp-48);padding:var(--sp-48) var(--sp-24) var(--sp-96)}
  .hero-visual{max-width:560px}
  .float-notif{right:-8px}
  .float-badge{left:-4px}
  .module-showcase,.module-showcase--reverse{grid-template-columns:1fr;gap:var(--sp-32)}
  .module-showcase--reverse{direction:ltr}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .rbac-grid{grid-template-columns:repeat(2,1fr)}
  .ad-split{grid-template-columns:180px 1fr}
  .ad-bottom-panels{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .ad-bottom-panels>.ad-mini-panel:last-child{grid-column:1/-1}
  .ad-features-grid{grid-template-columns:repeat(2,1fr)}
  .approval-flow{flex-wrap:wrap;gap:var(--sp-8)}
}
@media(max-width:768px){
  .header-nav{display:none}
  .hero{padding:var(--sp-32) var(--sp-16) var(--sp-64)}
  .hero-title{font-size:clamp(1.75rem,6.5vw,2.5rem)}
  .hero-subtitle{font-size:1rem}
  .hero-trust{flex-direction:column;gap:var(--sp-12)}
  .mockup-body{grid-template-columns:100px 1fr}
  .mock-sidebar{padding:var(--sp-12) var(--sp-8)}
  .mock-logo-text,.mock-sidebar-footer{display:none}
  .float-notif{display:none}
  .float-badge{left:auto;right:var(--sp-12);bottom:-20px}
  .modules,.capabilities,.ad-section-wrap{padding-left:var(--sp-16);padding-right:var(--sp-16)}
  .capabilities{padding-top:var(--sp-96)}
  .cap-grid{grid-template-columns:1fr}
  .rbac-grid{grid-template-columns:1fr}
  .ad-split{grid-template-columns:1fr}
  .ad-tree-panel{border-right:none;border-bottom:1px solid var(--mock-border)}
  .ad-bottom-panels{grid-template-columns:1fr}
  .ad-features-grid{grid-template-columns:1fr}
  .ad-user-row{grid-template-columns:1.4fr 1fr .6fr 30px;font-size:.625rem}
  .ad-user-row .ad-u-role{display:none}
  .ad-topbar{flex-direction:column;align-items:flex-start}
  .workflows{padding:var(--sp-96) 0}
  .workflows-inner{padding:0 var(--sp-16)}
  .approval-flow{flex-direction:column;align-items:flex-start}
  .approval-connector{width:2px;height:24px;margin-left:15px;margin-top:0}
  .cta-banner{padding:0 var(--sp-16) var(--sp-96)}
  .cta-banner-inner{padding:var(--sp-48) var(--sp-24)}
  .site-header{padding:var(--sp-12) var(--sp-16)}
  .site-footer{padding:var(--sp-24) var(--sp-16)}
  .footer-inner{flex-direction:column;text-align:center}
  .ticket-meta-row{grid-template-columns:repeat(2,1fr)}
  .hr-leave-cards{grid-template-columns:1fr}
  .notif-stream{margin-left:var(--sp-8);padding-left:var(--sp-16)}
}
@media(max-width:480px){
  .cta-row{flex-direction:column}
  .cta-row a{text-align:center;justify-content:center}
  .hero-title{font-size:clamp(1.5rem,7vw,2rem)}
  .mockup-body{grid-template-columns:1fr}
  .mock-sidebar{display:none}
  .mock-stats{grid-template-columns:1fr}
  .module-title{font-size:1.25rem}
  .section-heading{margin-bottom:var(--sp-32)}
  .brand img{height:36px}
}