/* ── PETALKUBE — LIGHT MODE GLOBAL STYLES ─────── */

:root {
  /* ── Brand colours ── */
  --navy:    #0D1137;
  --navy-l:  #131747;
  --navy-ll: #1a1f5e;
  --cyan:    #1A8FD1;
  --cyan2:   #17B5D4;
  --lime:    #6DD62A;

  /* ── Light surface palette ── */
  --bg:      #F5F7FC;
  --bg-alt:  #EDF0F8;
  --bg-card: #FFFFFF;
  --ink:     #0D1137;
  --ink2:    #2A3060;
  --muted:   #6B7299;
  --border:  rgba(13,17,55,0.09);
  --border2: rgba(13,17,55,0.15);
  --cyan-tint: rgba(26,143,209,0.08);
  --cyan-border: rgba(26,143,209,0.25);

  /* ── Dark surface (hero / footer stay dark) ── */
  --d-bg:    #0D1137;
  --d-bg-l:  #131747;
  --w70:     rgba(255,255,255,0.72);
  --w40:     rgba(255,255,255,0.42);
  --w12:     rgba(255,255,255,0.12);
  --w06:     rgba(255,255,255,0.07);

  --pad-x:   64px;
  --pad-sec: 96px 64px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}
img { max-width:100%; display:block }

/* ── CURSOR ── */
#dot  { width:8px;height:8px;background:var(--cyan);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s }
#ring { width:32px;height:32px;border:1px solid rgba(26,143,209,.45);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .08s,top .08s,width .2s,height .2s }
@media(hover:none){ #dot,#ring{display:none} body{cursor:auto} a,button{cursor:pointer} }

/* ════════════════════════════════════════════
   NAV  — white background, dark ink
   ════════════════════════════════════════════ */
nav {
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  background: rgba(245,247,252,0.0);
  transition:background .3s,box-shadow .3s;
}
nav.stuck {
  background: rgba(245,247,252,0.97);
  box-shadow: 0 1px 0 var(--border2);
  backdrop-filter: blur(16px);
}
.logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0 }.logo-wordmark { display:flex;flex-direction:column;line-height:1 }
.logo-name { font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.3px }
.logo-name b { color:var(--cyan);font-weight:700 }
.logo-tag { font-family:'Space Mono',monospace;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:3px }

/* nav on dark hero — flip text to white */
nav:not(.stuck) .logo-name { color:var(--white, #fff) }
nav:not(.stuck) .logo-tag  { color:rgba(255,255,255,.45) }
nav:not(.stuck) .nav-links a { color:rgba(255,255,255,.5) }
nav:not(.stuck) .nav-links a:hover,
nav:not(.stuck) .nav-links a.active { color:#fff }
nav:not(.stuck) .nav-btn { color:#fff;border-color:rgba(255,255,255,.4) }
nav:not(.stuck) .nav-btn:hover { background:#fff;color:var(--ink) }
nav:not(.stuck) .nav-hamburger span { background:#fff }

nav.stuck .logo { display:none; }
nav.stuck .logo-name { color:var(--ink) }
nav.stuck .logo-tag  { color:var(--muted) }
nav.stuck .nav-links a { color:var(--muted) }
nav.stuck .nav-links a:hover,
nav.stuck .nav-links a.active { color:var(--ink) }
nav.stuck .nav-btn { color:var(--cyan);border-color:var(--cyan) }
nav.stuck .nav-btn:hover { background:var(--cyan);color:#fff }
nav.stuck .nav-hamburger span { background:var(--ink) }

.nav-links { display:flex;gap:28px;list-style:none }
.nav-links a { font-size:17px;font-weight:600;text-decoration:none;transition:color .2s;position:relative;padding-bottom:2px;white-space:nowrap }
.nav-links a::after { content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--cyan);transition:width .2s }
.nav-links a.active::after,.nav-links a:hover::after { width:100% }

.nav-btn {
  font-family:'Inter',sans-serif;font-size:15px;font-weight:500;
  background:transparent;border:1px solid;
  padding:9px 20px;cursor:none;border-radius:3px;
  transition:background .2s,color .2s,border-color .2s;
  white-space:nowrap;text-decoration:none;display:inline-block;flex-shrink:0;
}

/* Hamburger */
.nav-hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px }
.nav-hamburger span { display:block;width:24px;height:2px;border-radius:2px;transition:transform .3s,opacity .3s }
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-menu { display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:490;background:rgba(245,247,252,.99);flex-direction:column;align-items:center;justify-content:center;gap:0;backdrop-filter:blur(20px) }
.mobile-menu.open { display:flex }
.mobile-menu ul { list-style:none;text-align:center }
.mobile-menu ul li { border-bottom:1px solid var(--border) }
.mobile-menu ul li a { display:block;padding:20px 40px;font-size:24px;font-weight:600;font-family:'Playfair Display',serif;color:var(--muted);text-decoration:none;transition:color .2s }
.mobile-menu ul li a:hover,.mobile-menu ul li a.active { color:var(--cyan) }
.mobile-menu .mobile-cta { margin-top:32px;font-family:'Inter',sans-serif;font-size:17px;font-weight:500;background:var(--cyan);color:#fff;border:none;padding:14px 40px;border-radius:3px;text-decoration:none;display:inline-block }

/* ════════════════════════════════════════════
   SHARED SECTION TOKENS
   ════════════════════════════════════════════ */
section { padding:var(--pad-sec);position:relative }

.s-kicker { font-family:'Space Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:16px }
.s-kicker::before { content:'';width:24px;height:2px;background:var(--cyan);flex-shrink:0 }
.s-line { width:40px;height:2px;background:var(--cyan);margin-bottom:32px }

.s-h2 { font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,56px);font-weight:700;line-height:1.05;letter-spacing:-1.5px;color:var(--ink) }
.s-h2 .c { color:var(--cyan) }
.s-h2 .g { color:var(--lime) }

/* dark-section overrides — headings/kicker stay readable on navy */
.dark-section .s-kicker { color:var(--cyan2) }
.dark-section .s-kicker::before { background:var(--cyan2) }
.dark-section .s-line { background:var(--cyan2) }
.dark-section .s-h2 { color:#fff }
.dark-section .s-h2 .c { color:var(--cyan2) }

/* ── BUTTONS ── */
.btn-primary { font-family:'Inter',sans-serif;font-size:16px;font-weight:600;background:var(--cyan);color:#fff;border:none;padding:13px 32px;cursor:none;border-radius:3px;transition:opacity .2s,transform .2s;display:inline-block;text-decoration:none }
.btn-primary:hover { opacity:.85;transform:translateY(-2px) }
.btn-ghost { font-family:'Inter',sans-serif;font-size:16px;font-weight:400;background:transparent;color:var(--muted);border:1px solid var(--border2);padding:13px 32px;cursor:none;border-radius:3px;transition:border-color .2s,color .2s;display:inline-block;text-decoration:none }
.btn-ghost:hover { border-color:var(--cyan);color:var(--cyan) }
.btn-ghost-dark { font-family:'Inter',sans-serif;font-size:16px;font-weight:400;background:transparent;color:var(--w40);border:1px solid var(--w12);padding:13px 32px;cursor:none;border-radius:3px;transition:border-color .2s,color .2s;display:inline-block;text-decoration:none }
.btn-ghost-dark:hover { border-color:var(--cyan2);color:var(--cyan2) }

/* ── TICKER ── */
.ticker { padding:14px 0;overflow:hidden;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative }
.ticker::before,.ticker::after { content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2 }
.ticker::before { left:0;background:linear-gradient(90deg,var(--bg-alt),transparent) }
.ticker::after  { right:0;background:linear-gradient(-90deg,var(--bg-alt),transparent) }
.t-track { display:flex;animation:t 30s linear infinite;width:max-content }
.t-item { display:flex;align-items:center;gap:24px;padding:0 24px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap }
.t-dot { width:3px;height:3px;border-radius:50%;background:var(--cyan);flex-shrink:0;opacity:.6 }
@keyframes t { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ════════════════════════════════════════════
   PAGE HERO — always dark navy
   ════════════════════════════════════════════ */
.page-hero {
  min-height:52vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px var(--pad-x) 72px;background:var(--d-bg);
  position:relative;overflow:hidden;
}
.page-hero-grid { position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(59,158,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,158,232,.06) 1px,transparent 1px);background-size:64px 64px;animation:gridmove 40s linear infinite }
@keyframes gridmove{0%{background-position:0 0}100%{background-position:64px 64px}}
.page-hero-glow { position:absolute;width:400px;height:400px;right:8%;top:50%;transform:translateY(-50%);background:radial-gradient(circle,rgba(59,158,232,.12) 0%,transparent 68%);pointer-events:none }
.br { position:absolute;width:48px;height:48px }
.br-tl { top:110px;left:var(--pad-x);border-top:2px solid var(--lime);border-left:2px solid var(--lime) }
.br-br { bottom:56px;right:var(--pad-x);border-bottom:2px solid var(--lime);border-right:2px solid var(--lime) }
.page-hero-kicker { font-family:'Space Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan2);display:flex;align-items:center;gap:10px;margin-bottom:20px;position:relative;z-index:2 }
.page-hero-kicker::before { content:'';width:24px;height:2px;background:var(--cyan2);flex-shrink:0 }
.page-hero h1 { font-family:'Playfair Display',serif;font-size:clamp(44px,6vw,88px);font-weight:700;line-height:.95;letter-spacing:-2.5px;position:relative;z-index:2;color:#fff }
.page-hero h1 .c { color:var(--cyan2) }
.page-hero h1 .g { color:var(--lime) }
.page-hero-sub { font-size:18px;color:var(--w40);max-width:540px;line-height:1.75;font-weight:300;margin-top:20px;position:relative;z-index:2 }

/* ════════════════════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════════════════════ */
.two-col   { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border) }
.three-col { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border) }

/* ── CARD BASE (light) ── */
.card { background:var(--bg-card);padding:44px 40px;position:relative;overflow:hidden;cursor:none;transition:box-shadow .3s,transform .3s;border:1px solid var(--border) }
.card:hover { box-shadow:0 12px 40px rgba(13,17,55,.1);transform:translateY(-3px) }
.card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan2));transform:scaleX(0);transform-origin:left;transition:transform .4s }
.card:hover::before { transform:scaleX(1) }

/* ── CARD BASE (dark variant) ── */
.card-dark { background:var(--d-bg-l);padding:44px 40px;position:relative;overflow:hidden;cursor:none;transition:background .3s }
.card-dark:hover { background:var(--navy-ll) }
.card-dark::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan2));transform:scaleX(0);transform-origin:left;transition:transform .4s }
.card-dark:hover::before { transform:scaleX(1) }

/* ════════════════════════════════════════════
   FOOTER — dark navy
   ════════════════════════════════════════════ */
footer { background:var(--d-bg-l);border-top:1px solid var(--w06);padding:56px var(--pad-x) 36px }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px }
.footer-brand .fl-name { font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px;margin-bottom:8px }
.footer-brand .fl-name b { color:var(--cyan2) }
.footer-brand p { font-size:15px;color:var(--w40);line-height:1.7;font-weight:300;max-width:240px;margin-top:12px }
.footer-col h4 { font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan2);margin-bottom:16px }
.footer-col ul { list-style:none }
.footer-col ul li { margin-bottom:10px }
.footer-col ul li a,.footer-col p { font-size:15px;color:var(--w40);text-decoration:none;transition:color .2s;line-height:1.7;font-weight:300 }
.footer-col ul li a:hover { color:#fff }
.footer-bottom { border-top:1px solid var(--w06);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap }
.footer-copy { font-family:'Space Mono',monospace;font-size:11px;color:var(--w40);opacity:.5 }
.footer-social { display:flex;gap:16px }
.footer-social a { font-size:14px;color:var(--w40);text-decoration:none;transition:color .2s }
.footer-social a:hover { color:var(--cyan2) }

/* ── REVEAL ── */
.reveal { opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s ease }
.reveal.in { opacity:1;transform:translateY(0) }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1024px){
  :root{ --pad-x:40px;--pad-sec:80px 40px }
  nav { padding:18px 40px }
  .footer-grid { grid-template-columns:1fr 1fr;gap:36px }
}

@media(max-width:768px){
  :root{ --pad-x:24px;--pad-sec:64px 24px }
  nav { padding:16px 24px }
  .nav-links,.nav-btn { display:none }
  .nav-hamburger { display:flex }
  .page-hero { padding:110px 24px 48px;min-height:44vh }
  .page-hero h1 { font-size:clamp(38px,10vw,60px);letter-spacing:-1.5px }
  .page-hero-sub { font-size:14px }
  .page-hero-glow { display:none }
  .s-h2 { font-size:clamp(28px,8vw,44px);letter-spacing:-1px }
  .two-col,.three-col { grid-template-columns:1fr }
  .card { padding:32px 24px }
  .card-dark { padding:32px 24px }
  .footer-grid { grid-template-columns:1fr;gap:28px }
  footer { padding:48px 24px 28px }
  .footer-bottom { flex-direction:column;text-align:center }
  .br { display:none }
}

@media(max-width:480px){
  .page-hero h1 { font-size:clamp(34px,9vw,48px) }
  .s-h2 { font-size:clamp(26px,8vw,36px) }
  .logo-tag { display:none }
}

.logo-svg { flex-shrink:0 }