
@font-face{font-family:'Paperlogy';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Paperlogy-500.woff2) format('woff2');}
@font-face{font-family:'Paperlogy';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Paperlogy-700.woff2) format('woff2');}
@font-face{font-family:'Paperlogy';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/Paperlogy-800.woff2) format('woff2');}
  :root{
    --ground:#FBFAFC;
    --surface:#FFFFFF;
    --surface-2:#F5F4F8;
    --ink:#2E2D38;
    --ink-soft:#6E6C7A;
    --ink-faint:#A6A4B2;
    --line:#E9E7EF;
    --line-soft:#F1EFF5;
    --indigo:#5B6BB0;
    --indigo-deep:#45549A;
    --mid:#8E7EAE;
    --terra:#CF8A7A;
    --terra-deep:#B87060;
    --grad:linear-gradient(120deg,#5B6BB0 0%,#8E7EAE 52%,#CF8A7A 100%);
    --grad-soft:linear-gradient(120deg,rgba(91,107,176,.14) 0%,rgba(142,126,174,.14) 52%,rgba(207,138,122,.14) 100%);
    --phone-shadow:0 40px 90px rgba(70,65,90,.30),0 0 0 1px rgba(255,255,255,.5) inset;
    --card-shadow:0 4px 18px rgba(70,65,95,.09),0 1px 3px rgba(70,65,95,.06);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"Paperlogy","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
    font-weight:500;
    background:var(--ground);color:var(--ink);
    line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);}

  header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s;}
  header.scrolled{border-bottom-color:var(--line);}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px;}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.01em;}
  .brand .mark{width:27px;height:27px;border-radius:8px;background:var(--grad) center/cover;background-image:url(/icon.png);box-shadow:0 4px 12px rgba(91,107,176,.4);flex-shrink:0;}
  .nav-links{display:flex;gap:24px;font-size:14.5px;font-weight:600;color:var(--ink-soft);}
  .nav-links a{color:inherit;text-decoration:none;transition:color .2s;}
  .nav-links a:hover{color:var(--ink);}

  .hero{position:relative;padding:60px 0 44px;}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
  .hero-copy .eyebrow{margin-bottom:18px;display:inline-block;}
  h1{font-size:clamp(38px,5.6vw,62px);line-height:1.05;font-weight:800;letter-spacing:-.03em;text-wrap:balance;margin-bottom:22px;}
  h1 .accent{white-space:nowrap;}
  .hero-sub{font-size:clamp(16px,2vw,18.5px);color:var(--ink-soft);max-width:34ch;margin-bottom:26px;text-wrap:pretty;}
  .tags{display:flex;flex-wrap:wrap;gap:8px;max-width:440px;}
  .tag-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 11px;box-shadow:0 1px 2px rgba(70,65,95,.04);}
  .tag-chip svg{width:15px;height:15px;flex-shrink:0;color:var(--indigo-deep);}
  .tag-chip b{color:var(--indigo-deep);font-weight:700;}

  .hero-visual{position:relative;display:flex;justify-content:center;}
  .hero-visual::before{content:"";position:absolute;width:118%;height:118%;left:-9%;top:-6%;background:var(--grad-soft);filter:blur(30px);border-radius:50%;z-index:0;}
  .phone{position:relative;z-index:2;width:300px;background:var(--surface);border-radius:40px;padding:9px;box-shadow:var(--phone-shadow);}
  .phone .screen{border-radius:32px;overflow:hidden;background:var(--surface-2);}
  .ss{position:relative;width:100%;aspect-ratio:9 / 19.3;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:
      repeating-linear-gradient(45deg,rgba(91,107,176,.05) 0 10px,transparent 10px 20px),var(--surface-2);
      color:var(--ink-faint);font-size:13px;font-weight:700;line-height:1.5;border:1.5px dashed rgba(91,107,176,.35);border-radius:inherit;}
  .ss .k{display:block;font-size:11px;letter-spacing:.08em;color:var(--indigo);margin-bottom:6px;}
  .shot-img{display:block;width:100%;aspect-ratio:1170 / 2532;object-fit:cover;object-position:top center;}

  .cheer{position:absolute;z-index:4;background:var(--surface);border-radius:16px;padding:9px 13px;box-shadow:0 12px 30px rgba(70,65,95,.22);display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;}
  .cheer .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6FA98B,#B89860);flex-shrink:0;}
  .cheer .clap{font-size:15px;}
  .cheer.one{right:-34px;top:96px;animation:floaty 4s ease-in-out infinite;}
  .cheer.two{left:-40px;bottom:120px;animation:floaty 4.6s ease-in-out .8s infinite;}
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

  section.band{padding:78px 0;}
  .band-head{max-width:660px;margin-bottom:44px;}
  .band-head h2{font-size:clamp(27px,3.7vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;margin:14px 0 0;}
  .band-head p{font-size:16px;color:var(--ink-soft);margin-top:14px;max-width:52ch;text-wrap:pretty;}

  .band.lead{padding:26px 0 6px;text-align:center;}
  .lead .set{font-size:clamp(19px,2.5vw,26px);line-height:1.6;color:var(--ink-soft);max-width:760px;margin:0 auto;font-weight:500;text-wrap:pretty;}
  .lead .pay{display:block;margin-top:20px;font-size:clamp(24px,3.6vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.2;text-wrap:balance;}

  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
  .pillar{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px 26px 30px;box-shadow:var(--card-shadow);position:relative;overflow:hidden;}
  .pillar-ix{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ink-faint);}
  .pillar h3{font-size:21px;font-weight:800;margin:14px 0 10px;letter-spacing:-.01em;}
  .pillar p{font-size:14.5px;color:var(--ink-soft);text-wrap:pretty;}
  .pv{position:relative;margin-top:22px;min-height:200px;max-height:200px;overflow:hidden;border-radius:14px;border:1px solid var(--line-soft);background:var(--surface-2);line-height:0;transition:max-height .55s ease;}
  .pv .shot-img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block;}
  .pv.clip:hover,.pv.clip.open{max-height:1600px;}
  .pv.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74px;background:linear-gradient(rgba(245,244,248,0),var(--surface-2));pointer-events:none;z-index:2;transition:opacity .4s;}
  .pv.clip.open::after,.pv.clip:hover::after{opacity:0;}
  .pv-more{display:none;}
  .pv.clip .pv-more{display:inline-flex;align-items:center;gap:5px;position:absolute;left:50%;bottom:11px;transform:translateX(-50%);z-index:3;font:inherit;font-size:12px;font-weight:700;line-height:1;color:var(--indigo-deep);background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;box-shadow:0 2px 8px rgba(70,65,95,.14);transition:opacity .3s;}
  .pv.clip:hover:not(.open) .pv-more{opacity:0;}
  .pv-dots{display:flex;gap:9px;align-items:center;justify-content:center;height:100%;}
  .pv-dots i{width:15px;height:15px;border-radius:50%;background:var(--grad);opacity:.85;}
  .pv-dots i.p{opacity:.5;}.pv-dots i.m{opacity:.2;}
  .pv-dots i.empty{background:none;border:1.5px dashed var(--ink-faint);opacity:.5;}
  .pv-cheer{display:flex;flex-direction:column;gap:7px;justify-content:center;height:100%;padding:0 18px;}
  .pv-cheer .row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);}
  .pv-cheer .row .a{width:20px;height:20px;border-radius:50%;flex-shrink:0;}
  .pv-cheer .row .a.g{background:linear-gradient(135deg,#6FA98B,#B89860);}
  .pv-cheer .row .a.i{background:var(--grad);}
  .pv-cheer .row .c{margin-left:auto;font-size:13px;}
  .pv-together{display:flex;align-items:center;justify-content:center;height:100%;}
  .pv-together .stack{display:flex;}
  .pv-together .stack .a{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--surface);margin-left:-10px;}
  .pv-together .stack .a:nth-child(1){background:var(--grad);margin-left:0;}
  .pv-together .stack .a:nth-child(2){background:linear-gradient(135deg,#6FA98B,#B89860);}
  .pv-together .stack .a:nth-child(3){background:linear-gradient(135deg,#CF8A7A,#B89860);}
  .pv-together .stack .a:nth-child(4){background:var(--surface-2);border-style:dashed;border-color:var(--ink-faint);}

  .gallery{background:var(--surface-2);}
  .dens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .dens{display:flex;align-items:center;gap:16px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--card-shadow);}
  .dens .sw{width:46px;height:54px;border-radius:11px;flex-shrink:0;position:relative;background:var(--surface-2);}
  .dens .sw::before{content:"";position:absolute;inset:0;border-radius:11px;background:var(--indigo);}
  .dens.l1 .sw::before{opacity:.85;}
  .dens.l2 .sw::before{opacity:.5;}
  .dens.l3 .sw::before{opacity:.2;}
  .dens .lv{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink-faint);}
  .dens h4{font-size:16px;font-weight:800;margin:3px 0 3px;}
  .dens p{font-size:13px;color:var(--ink-soft);}

  .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;align-items:start;}
  .shot{text-align:center;}
  .mini-phone{background:var(--surface);border-radius:30px;padding:7px;box-shadow:var(--card-shadow);margin:0 auto 18px;max-width:230px;}
  .mini-phone .screen{border-radius:24px;overflow:hidden;background:var(--ground);}
  .shot h4{font-size:16.5px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em;}
  .shot p{font-size:13.5px;color:var(--ink-soft);max-width:26ch;margin:0 auto;}

  .manifesto{text-align:center;}
  .manifesto .card{background:var(--grad);border-radius:30px;padding:76px 32px;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(91,107,176,.34);}
  .manifesto .card::before,.manifesto .card::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);}
  .manifesto .card::before{width:220px;height:220px;top:-80px;right:-50px;}
  .manifesto .card::after{width:160px;height:160px;bottom:-70px;left:-40px;}
  .manifesto .in{position:relative;z-index:2;max-width:640px;margin:0 auto;}
  .manifesto .big{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;}
  .manifesto .sub{font-size:16.5px;color:rgba(255,255,255,.9);margin-top:20px;}

  .app{text-align:center;padding:64px 0 8px;}
  .app h3{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;}
  .app p{font-size:14.5px;color:var(--ink-soft);margin-bottom:24px;}
  .badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .badge{display:flex;align-items:center;gap:11px;background:var(--ink);color:var(--ground);padding:12px 22px;border-radius:14px;font-weight:700;opacity:.94;transition:opacity .2s,transform .15s;cursor:pointer;}
  .badge:hover{opacity:1;transform:translateY(-2px);}
  .badge .logo{width:24px;height:24px;flex-shrink:0;}
  .badge .txt{text-align:left;line-height:1.15;}
  .badge .txt small{display:block;font-size:10px;font-weight:600;opacity:.7;}
  .badge .txt b{font-size:15px;}
  .soon{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:20px;}

  footer{border-top:1px solid var(--line);margin-top:64px;padding:44px 0 56px;}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .foot .brand{font-size:17px;}
  .foot-tag{font-size:14px;color:var(--ink-soft);max-width:40ch;margin-top:12px;}
  .foot-links{display:flex;gap:22px;font-size:13.5px;color:var(--ink-soft);}
  .foot-links a{color:inherit;text-decoration:none;transition:color .2s;}
  .foot-links a:hover{color:var(--ink);}
  .foot-copy{font-size:12.5px;color:var(--ink-faint);margin-top:26px;}

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;gap:40px;}
    .hero-copy{text-align:center;}
    .hero-copy .tags{justify-content:center;margin-left:auto;margin-right:auto;}
    .hero-sub{margin-left:auto;margin-right:auto;}
    .pillars,.dens-grid{grid-template-columns:1fr;}
    .shots{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto;}
    .nav-links{display:none;}
    .cheer.one{right:-10px;}.cheer.two{left:-14px;}
  }
  @media (max-width:520px){h1{font-size:36px;}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
