:root{
    --red:#E30613;
    --red-rgb:227,6,19;
    --red-hi:#ee2029;
    --red-mid:#ff7a80;
    --red-soft:rgba(var(--red-rgb),0.12);
    --ink:#0A0A0A;
    --gray-dark:#1C1C1E;
    --gray:#6E6E73;
    --gray-light:#F5F5F7;
    --white:#FFFFFF;
    --page-bg:#FFFFFF;
    --page-bg-2:#fbfbfc;
    --surface:#f0f0f2;
    --surface-2:#fafafa;
    --glass-bg:rgba(255,255,255,0.55);
    --glass-bg-strong:rgba(255,255,255,0.72);
    --glass-border:rgba(255,255,255,0.65);
    --glass-shadow:0 8px 32px rgba(10,10,10,0.06), 0 1px 0 rgba(255,255,255,0.5) inset;
    --hairline:rgba(10,10,10,0.05);
    --hover-tint:rgba(10,10,10,0.05);
    --shadow-color:rgba(10,10,10,0.10);
    --shadow-color-strong:rgba(10,10,10,0.14);
    --thumb-icon:rgba(10,10,10,0.18);
    --blob-dark:rgba(10,10,10,0.05);
    --logo-ink:#0A0A0A;
    --play-bg:rgba(255,255,255,0.85);
    --ease:cubic-bezier(.16,1,.3,1);
    --theme-transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  }

  /* Safari/WebKit does not reliably support CSS custom properties used as an
     SVG presentation attribute (fill="var(--x)"). Using a class + CSS rule
     instead of the raw attribute fixes the logo not rendering in Safari. */
  .logo-ink{ fill:var(--logo-ink); }

  html[data-theme="dark"]{
    --ink:#F5F5F7;
    --gray-dark:#E5E5E7;
    --gray:#9A9AA1;
    --gray-light:#1C1C1E;
    --white:#0A0A0A;
    --page-bg:#0A0A0A;
    --page-bg-2:#111113;
    --surface:#18181b;
    --surface-2:#131315;
    --glass-bg:rgba(255,255,255,0.06);
    --glass-bg-strong:rgba(255,255,255,0.09);
    --glass-border:rgba(255,255,255,0.12);
    --glass-shadow:0 8px 32px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.06) inset;
    --hairline:rgba(255,255,255,0.08);
    --hover-tint:rgba(255,255,255,0.07);
    --shadow-color:rgba(0,0,0,0.45);
    --shadow-color-strong:rgba(0,0,0,0.55);
    --thumb-icon:rgba(255,255,255,0.16);
    --blob-dark:rgba(255,255,255,0.05);
    --logo-ink:#F5F5F7;
    --play-bg:rgba(20,20,22,0.85);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink);
    background:var(--page-bg);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    transition:var(--theme-transition);
  }
  h1,h2,h3,h4,.display{
    font-family:'Inter Tight',-apple-system,sans-serif;
    letter-spacing:-0.03em;
    font-weight:700;
    line-height:1.05;
  }
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  ::selection{background:var(--red);color:#fff;}

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

  /* ---------- Background ambience ---------- */
  .bg-scene{
    position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, var(--page-bg-2) 0%, var(--page-bg) 60%);
    transition:var(--theme-transition);
  }
  .glow-blob{
    position:absolute; border-radius:50%;
    filter:blur(80px);
    opacity:.55;
    will-change:transform;
  }
  .glow-blob.b1{ width:600px; height:600px; top:-200px; left:-150px; background:radial-gradient(circle, rgba(var(--red-rgb),0.14), transparent 70%); }
  .glow-blob.b2{ width:520px; height:520px; top:20%; right:-180px; background:radial-gradient(circle, rgba(var(--red-rgb),0.10), transparent 70%); }
  .glow-blob.b3{ width:700px; height:700px; bottom:-260px; left:20%; background:radial-gradient(circle, var(--blob-dark), transparent 70%); }

  .noise{
    position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Glass utility ---------- */
  .glass{
    background:var(--glass-bg);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    transition:var(--theme-transition);
  }
  .glass-strong{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    transition:var(--theme-transition);
  }

  .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
  section{ position:relative; padding:150px 0; }
  @media (max-width:768px){ section{ padding:100px 0; } .wrap{ padding:0 22px; } }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--red); margin-bottom:18px;
  }
  .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--red); }

  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head h2{ font-size:clamp(32px,4.2vw,48px); margin-bottom:16px; }
  .section-head p{ font-size:18px; color:var(--gray); line-height:1.6; }

  /* ---------- Reveal ---------- */
  [data-reveal]{
    opacity:0; transform:translateY(28px);
    filter:blur(6px);
    transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  }
  [data-reveal].in{ opacity:1; transform:translateY(0); filter:blur(0); }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:16px; left:50%; transform:translateX(-50%);
    width:calc(100% - 32px); max-width:1180px;
    z-index:100;
    border-radius:22px;
    padding:12px 14px 12px 20px;
    display:flex; align-items:center; justify-content:space-between;
    transition:padding .4s var(--ease), border-radius .4s var(--ease), box-shadow .4s var(--ease);
  }
  .nav.scrolled{ padding:9px 12px 9px 18px; box-shadow:0 10px 40px var(--shadow-color), 0 1px 0 rgba(255,255,255,0.6) inset; }

  .nav-logo{ display:flex; align-items:center; gap:11px; font-family:'Inter Tight'; font-weight:700; font-size:20px; letter-spacing:-0.01em; }
  .site-logo-mark{ display:inline-flex; align-items:center; }
  .nav-logo .site-logo-img{ width:48px; height:48px; object-fit:contain; }
  .footer-left .site-logo-img{ width:28px; height:28px; object-fit:contain; }
  .nav-logo svg{ width:48px; height:48px; }

  .nav-links{ display:flex; gap:6px; align-items:center; }
  .nav-links a{
    font-size:14.5px; font-weight:500; color:var(--gray-dark);
    padding:9px 16px; border-radius:14px;
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .nav-links a:hover{ background:var(--hover-tint); color:var(--ink); }

  .theme-toggle{
    width:38px; height:38px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:var(--hover-tint);
    transition:background .3s var(--ease), transform .3s var(--ease);
    flex-shrink:0;
  }
  .theme-toggle:hover{ transform:rotate(-8deg); }
  .theme-toggle svg{ width:18px; height:18px; stroke:var(--ink); transition:opacity .25s ease, transform .4s var(--ease); }
  .theme-toggle .icon-sun{ display:none; }
  html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
  html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
  .nav-actions{ display:flex; align-items:center; gap:10px; }

  .nav-cta{
    font-size:14px; font-weight:600; color:#fff;
    background:linear-gradient(180deg, var(--red-hi), var(--red));
    padding:10px 20px; border-radius:14px;
    box-shadow:0 4px 16px rgba(var(--red-rgb),0.28);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(var(--red-rgb),0.36); }

  .nav-toggle{ display:none; width:38px; height:38px; border-radius:11px; align-items:center; justify-content:center; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; display:block; width:18px; height:1.6px; background:var(--ink); position:relative; transition:all .3s var(--ease);
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }

  @media (max-width:860px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
  }
  @media (max-width:520px){
    .nav-cta{ display:none; }
  }

  .mobile-menu{
    position:fixed; top:104px; left:16px; right:16px; z-index:99;
    border-radius:20px; padding:14px; display:none; flex-direction:column; gap:4px;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{ padding:14px 12px; font-size:16px; font-weight:500; border-radius:12px; }
  .mobile-menu a:hover{ background:var(--hover-tint); }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh; display:flex; align-items:center;
    padding-top:140px; padding-bottom:60px;
  }
  .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; width:100%; }
  @media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:56px; } }

  .hero h1{ font-size:clamp(40px,6vw,74px); margin-bottom:24px; }
  .hero h1 .accent{ color:var(--red); }
  .hero p.lead{ font-size:19px; color:var(--gray); max-width:480px; line-height:1.65; margin-bottom:36px; }

  .btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    font-size:15px; font-weight:600; padding:15px 26px; border-radius:16px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  }
  .btn-primary{
    color:#fff; background:linear-gradient(180deg,var(--red-hi),var(--red));
    box-shadow:0 6px 22px rgba(var(--red-rgb),0.30);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--red-rgb),0.38); }
  .btn-glass{ color:var(--ink); }
  .btn-glass:hover{ transform:translateY(-2px); }

  /* Hero visual: floating glass device */
  .hero-visual{ position:relative; height:480px; }
  @media (max-width:960px){ .hero-visual{ height:340px; } }
  .hero-glow{
    position:absolute; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(var(--red-rgb),0.22), transparent 65%);
    filter:blur(10px);
    left:calc(var(--mx, 50%) - 210px);
    top:calc(var(--my, 50%) - 210px);
    transition:left .3s ease-out, top .3s ease-out;
    pointer-events:none;
  }
  .glass-card-float{
    position:absolute; border-radius:28px;
    animation:float 7s ease-in-out infinite;
  }
  .gcf-1{ width:78%; height:70%; top:6%; left:11%; animation-delay:0s; padding:26px; display:flex; flex-direction:column; justify-content:space-between; }
  .gcf-2{ width:44%; height:34%; bottom:2%; right:0%; animation-delay:1.4s; padding:18px; }
  .gcf-3{ width:30%; height:22%; top:0%; right:8%; animation-delay:2.8s; padding:14px; }
  @keyframes float{ 0%,100%{ transform:translateY(0px) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(-0.6deg);} }

  .gcf-1 .tag{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--red); }
  .gcf-1 .tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--red); }
  .gcf-1 .rating{ display:flex; align-items:center; gap:10px; }
  .gcf-1 .stars{ display:flex; gap:3px; }
  .gcf-1 .stars svg{ width:16px; height:16px; fill:var(--red); }
  .gcf-1 .score{ font-family:'Inter Tight'; font-weight:800; font-size:34px; }
  .gcf-1 .score small{ font-size:14px; font-weight:600; color:var(--gray); }

  .gcf-2{ display:flex; align-items:center; gap:12px; }
  .gcf-2 .pulse{ width:34px; height:34px; border-radius:50%; background:rgba(var(--red-rgb),0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .gcf-2 .pulse svg{ width:16px; height:16px; stroke:var(--red); }
  .gcf-2 .t1{ font-size:13px; font-weight:600; }
  .gcf-2 .t2{ font-size:12px; color:var(--gray); }

  .gcf-3{ display:flex; align-items:center; justify-content:center; }
  .gcf-3 svg{ width:28px; height:28px; stroke:var(--ink); }

  /* ---------- Marquee strip ---------- */
  .strip{ padding:26px 0; }
  .strip .wrap{ display:flex; align-items:center; gap:14px; overflow:hidden; }
  .strip-track{ display:flex; gap:48px; white-space:nowrap; animation:scroll-x 26s linear infinite; }
  .strip-track span{ font-family:'Inter Tight'; font-size:14px; font-weight:600; color:var(--gray); letter-spacing:.04em; text-transform:uppercase; }
  .strip-track span b{ color:var(--red); }
  @keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ---------- About / Focus cards ---------- */
  .focus-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:860px){ .focus-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .focus-grid{ grid-template-columns:1fr; } }

  .focus-card{
    border-radius:24px; padding:30px 26px;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  }
  .focus-card:hover{ transform:translateY(-6px); box-shadow:0 20px 45px var(--shadow-color); border-color:rgba(var(--red-rgb),0.35); }
  .focus-icon{
    width:48px; height:48px; border-radius:14px;
    background:var(--red-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
    transition:background .4s var(--ease), transform .4s var(--ease);
  }
  .focus-card:hover .focus-icon{ background:var(--red); transform:scale(1.06) rotate(-4deg); }
  .focus-icon svg{ width:22px; height:22px; stroke:var(--red); transition:stroke .4s var(--ease); }
  .focus-card:hover .focus-icon svg{ stroke:#fff; }
  .focus-card h3{ font-size:19px; margin-bottom:8px; letter-spacing:-0.01em; }
  .focus-card p{ font-size:14.5px; color:var(--gray); line-height:1.55; }

  .about-copy{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:70px; align-items:start; }
  @media (max-width:860px){ .about-copy{ grid-template-columns:1fr; gap:26px; } }
  .about-copy h2{ font-size:clamp(30px,4vw,44px); }
  .about-copy p{ font-size:17px; color:var(--gray); line-height:1.7; }

  /* ---------- Creator / Profile ---------- */
  .creator-panel{ padding:0; }
  .creator-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:70px; align-items:center; }
  @media (max-width:860px){ .creator-grid{ grid-template-columns:1fr; gap:50px; } }

  .creator-photo-stage{ position:relative; max-width:340px; margin:0 auto; }
  .creator-photo-frame-bg{
    position:absolute; inset:0; border:1.5px solid var(--red);
    border-radius:26px; transform:rotate(-6deg) scale(0.96);
    opacity:.55;
  }
  .creator-photo-dots{
    position:absolute; width:110px; height:110px; right:-26px; top:-30px;
    background-image:radial-gradient(var(--red) 1.6px, transparent 1.6px);
    background-size:12px 12px; opacity:.35; z-index:0;
  }
  .creator-photo-parallax{ position:relative; z-index:1; will-change:transform; }
  .creator-photo-float{ animation:creatorFloat 5.5s ease-in-out infinite; }
  @keyframes creatorFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

  .creator-photo-glow{
    position:absolute; inset:-36px; border-radius:50%;
    background:radial-gradient(circle, rgba(var(--red-rgb),0.3), transparent 65%);
    filter:blur(20px); pointer-events:none; z-index:0;
  }
  .creator-photo{
    position:relative; aspect-ratio:4/5; width:100%;
    border-radius:24px; overflow:hidden; border:1px solid var(--glass-border);
    box-shadow:0 24px 55px var(--shadow-color-strong);
  }
  .creator-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

  .creator-photo-badge{
    position:absolute; left:-22px; bottom:22px; z-index:2;
    display:flex; align-items:center; gap:10px;
    padding:12px 18px; border-radius:16px;
    background:var(--bg); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
  }
  .creator-photo-badge .num{ font-family:'Inter Tight'; font-weight:800; font-size:20px; color:var(--red); line-height:1; }
  .creator-photo-badge .lbl{ font-size:11.5px; font-weight:600; color:var(--gray); line-height:1.3; }

  .creator-copy .eyebrow{ margin-bottom:14px; }
  .creator-copy h2{ font-size:clamp(30px,4vw,46px); margin-bottom:4px; line-height:1.05; }
  .creator-role{ font-size:15px; font-weight:600; color:var(--red); margin-bottom:24px; }
  .creator-copy p{ font-size:16px; color:var(--gray); line-height:1.75; margin-bottom:16px; }
  .creator-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .creator-tag{
    font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px;
    background:var(--red-soft); color:var(--red);
  }

  /* ---------- Featured content ---------- */
  .feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  @media (max-width:760px){ .feature-grid{ grid-template-columns:1fr; } }

  .feature-card{ border-radius:26px; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
  .feature-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px var(--shadow-color-strong); }
  .feature-thumb{
    height:210px; position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--surface), var(--surface-2));
  }
  .feature-thumb::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:radial-gradient(circle at 30% 30%, rgba(var(--red-rgb),0.18), transparent 60%);
  }
  .feature-thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:blur(0px) brightness(1); transform:scale(1.02);
    transition:filter .5s var(--ease), transform .5s var(--ease), brightness .5s var(--ease);
  }
  .feature-thumb .ph-icon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
    opacity:0; transform:scale(.85);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .feature-thumb .ph-icon svg{ width:44px; height:44px; stroke:#fff; }
  .feature-card:hover .feature-thumb img{ filter:blur(6px) brightness(.55); transform:scale(1.08); }
  .feature-card:hover .feature-thumb .ph-icon{ opacity:1; transform:scale(1); }
  .feature-body{ padding:26px 28px 28px; }
  .feature-cat{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--red); margin-bottom:10px; display:block; }
  .feature-body h3{ font-size:21px; margin-bottom:10px; }
  .feature-body p{ font-size:14.5px; color:var(--gray); line-height:1.6; margin-bottom:18px; }
  .read-more{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink); }
  .read-more svg{ width:15px; height:15px; stroke:var(--ink); transition:transform .35s var(--ease); }
  .feature-card:hover .read-more svg{ transform:translateX(5px); }

  /* ---------- YouTube section ---------- */
  .yt-panel{ border-radius:32px; padding:56px; }
  @media (max-width:768px){ .yt-panel{ padding:32px 24px; } }
  .yt-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:44px; }
  .yt-top h2{ font-size:clamp(28px,3.6vw,40px); }
  .yt-sub{ display:flex; align-items:center; gap:12px; }
  .yt-badge{ width:44px; height:44px; border-radius:12px; background:var(--red); display:flex; align-items:center; justify-content:center; }
  .yt-badge svg{ width:20px; height:20px; fill:#fff; }
  .yt-sub .name{ font-weight:700; font-size:15px; }
  .yt-sub .sub{ font-size:13px; color:var(--gray); }

  .yt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
  @media (max-width:760px){ .yt-grid{ grid-template-columns:1fr; } }
  .yt-thumb{
    border-radius:18px; aspect-ratio:16/9; position:relative; overflow:hidden;
    background:linear-gradient(140deg,var(--surface),var(--surface-2));
    display:flex; align-items:center; justify-content:center;
    transition:transform .4s var(--ease);
    cursor:pointer;
  }
  .yt-thumb:hover{ transform:scale(1.02); }
  .yt-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .yt-thumb .play{
    width:52px; height:52px; border-radius:50%; background:var(--play-bg);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px var(--shadow-color-strong);
  }
  .yt-thumb .play svg{ width:18px; height:18px; fill:var(--red); margin-left:2px; }
  .yt-thumb .len{ position:absolute; bottom:10px; right:10px; background:rgba(10,10,10,0.65); color:#fff; font-size:11px; font-weight:600; padding:3px 7px; border-radius:6px; }

  .yt-cta{ display:flex; justify-content:center; }

  /* ---------- Social ---------- */
  .social-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media (max-width:760px){ .social-grid{ grid-template-columns:repeat(2,1fr); } }
  .social-card{
    border-radius:22px; padding:26px 20px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .social-card:hover{ transform:translateY(-5px) scale(1.02); box-shadow:0 16px 36px var(--shadow-color); }
  .social-icon{
    width:46px; height:46px; border-radius:13px; background:var(--gray-light);
    display:flex; align-items:center; justify-content:center;
    transition:background .4s var(--ease), transform .4s var(--ease);
  }
  .social-card:hover .social-icon{ background:var(--red); transform:rotate(-6deg) scale(1.08); }
  .social-icon svg{ width:20px; height:20px; fill:var(--ink); transition:fill .4s var(--ease); }
  .social-card:hover .social-icon svg{ fill:#fff; }
  .social-card span{ font-size:13.5px; font-weight:600; }

  /* ---------- Contact ---------- */
  .contact-panel{
    border-radius:32px; padding:64px; text-align:center;
    max-width:760px; margin:0 auto; position:relative; overflow:hidden;
  }
  @media (max-width:768px){ .contact-panel{ padding:40px 26px; } }
  .contact-panel::before{
    content:''; position:absolute; width:360px; height:360px; border-radius:50%;
    background:radial-gradient(circle, rgba(var(--red-rgb),0.14), transparent 70%);
    top:-120px; left:50%; transform:translateX(-50%); pointer-events:none;
  }
  .contact-panel h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; position:relative; }
  .contact-panel > p{ font-size:17px; color:var(--gray); margin-bottom:40px; position:relative; }
  .contact-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:40px; position:relative; }
  .contact-row{
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:16px; border-radius:16px;
    font-size:15.5px; font-weight:500;
    transition:background .35s var(--ease), transform .35s var(--ease);
  }
  .contact-row:hover{ background:rgba(var(--red-rgb),0.06); transform:translateY(-1px); }
  .contact-row svg{ width:18px; height:18px; stroke:var(--red); color:var(--red); flex-shrink:0; }

  /* ---------- Footer ---------- */
  footer{ padding:36px 0 40px; }
  .footer-panel{
    border-radius:24px; padding:22px 30px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  .footer-left{ display:flex; align-items:center; gap:11px; font-family:'Inter Tight'; font-weight:700; font-size:18px; }
  .footer-left svg{ width:28px; height:28px; }
  .footer-right{ font-size:13px; color:var(--gray); display:flex; gap:20px; flex-wrap:wrap; }

  /* ---------- Scroll progress ---------- */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:300;
    background:linear-gradient(90deg, var(--red), var(--red-mid), var(--red));
    background-size:200% 100%;
    animation:progress-shimmer 3s linear infinite;
    box-shadow:0 0 14px rgba(var(--red-rgb),0.65);
  }
  @keyframes progress-shimmer{ from{ background-position:0% 0;} to{ background-position:200% 0;} }

  /* ---------- Card tilt support ---------- */
  .focus-card, .feature-card, .social-card{ will-change:transform; transform-style:preserve-3d; }

  /* ---------- Blob breathing (opacity only, avoids JS transform conflict) ---------- */
  .glow-blob{ animation:blob-breathe 10s ease-in-out infinite; }
  .glow-blob.b2{ animation-delay:-3.3s; }
  .glow-blob.b3{ animation-delay:-6.6s; }
  @keyframes blob-breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }

  /* ---------- Eyebrow pulse dot ---------- */
  .eyebrow::before{ animation:pulse-dot 2.2s ease-in-out infinite; }
  @keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--red-rgb),0.55); } 50%{ box-shadow:0 0 0 6px rgba(var(--red-rgb),0); } }

  /* ---------- Hero title word reveal ---------- */
  .reveal-title .rt-word{
    display:inline-block; opacity:0; transform:translateY(120%) rotate(4deg);
    filter:blur(10px);
    animation:word-in 1s var(--ease) forwards;
  }
  @keyframes word-in{ to{ opacity:1; transform:translateY(0) rotate(0deg); filter:blur(0); } }

  /* ---------- Button ripple + magnetic ---------- */
  .btn{ position:relative; overflow:hidden; will-change:transform; }
  .nav-cta{ will-change:transform; }
  .btn-ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
    transform:scale(0); animation:ripple-anim .65s ease-out forwards; pointer-events:none;
  }
  @keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

  /* ---------- Play button pulse ---------- */
  .yt-thumb .play{ animation:play-pulse 2.6s ease-in-out infinite; }
  @keyframes play-pulse{
    0%,100%{ box-shadow:0 8px 20px var(--shadow-color-strong), 0 0 0 0 rgba(var(--red-rgb),0.35); }
    50%{ box-shadow:0 8px 20px var(--shadow-color-strong), 0 0 0 12px rgba(var(--red-rgb),0); }
  }

  /* ---------- Nav logo liquid wobble ---------- */
  .nav-logo svg{ transition:transform .5s var(--ease); }
  .nav-logo:hover svg{ transform:rotate(-8deg) scale(1.08); }

  /* focus visibility */
  a:focus-visible, button:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:8px; }

  /* =====================================================================
     PERFORMANCE
     ===================================================================== */

  /* The animated background blobs are large, blurred, continuously-animating
     layers. They look great on a desktop GPU but are one of the most
     expensive things on the page, especially on phones. Promote them to
     their own compositor layer so animating them never repaints the rest
     of the page. */
  .glow-blob{ will-change:transform; contain:strict; }

  /* Sections below the fold don't need to be laid out or painted until the
     user scrolls near them. This measurably shortens initial render on
     long pages, and `contain-intrinsic-size` keeps the scrollbar stable. */
  #blog-preview, #youtube, footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 600px;
  }

  /* Reserve space for card images so the layout doesn't jump as they load. */
  .feature-thumb img, .blog-card-thumb img{ display:block; }

  /* ---- Mobile: drop the most expensive effects ---- */
  @media (max-width:760px){
    /* Backdrop blur on a large moving element is very costly on phones and
       is barely perceptible at this size — keep the translucency, skip the
       blur. */
    .glass, .glass-strong{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
    /* The nav bar and mobile dropdown are small, fixed-position elements
       (not large scrolling surfaces), so a blur on them is cheap even on
       phones. Re-enable it just for these two, using the same translucent
       glass-strong tint as the desktop "liquid glass" look (rather than a
       near-solid patch) so content behind still shows through, softly
       blurred. The blur radius is pushed higher than the desktop value to
       compensate for the lower opacity and keep nav/menu text crisp. */
    .nav, .mobile-menu{
      background:var(--glass-bg-strong) !important;
      backdrop-filter:blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
    }
    /* Two of the three blobs are decorative overlap; one is plenty. */
    .glow-blob.b2, .glow-blob.b3{ display:none; }
    .glow-blob{ animation:none; }
  }

  /* ---- Respect the OS "reduce motion" setting ---- */
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
    .glow-blob{ animation:none !important; }
  }