:root {
  --navy:#041641;
  --navy2:#071f57;
  --violet:#1b0a58;
  --cream:#fff8e9;
  --ink:#102451;
  --pink:#ff58b2;
  --orange:#ff9f43;
  --gold:#ffd55f;
  --white:#fff;
  --shadow:0 25px 65px rgba(0,8,45,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#061c50 0%,#17105c 55%,#0b1b50 100%);color:#fff;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.section-shell{width:min(1180px,calc(100% - 34px));margin-inline:auto}
.skip-link{position:fixed;left:-9999px;top:10px;z-index:9999;background:#fff;color:#000;padding:.7rem 1rem}.skip-link:focus{left:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.site-header{position:absolute;z-index:20;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(1,12,48,.9),rgba(1,12,48,.35),transparent);padding-top:8px}
.nav-wrap{width:min(1180px,calc(100% - 34px));margin:auto;min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:250px;height:auto;filter:drop-shadow(0 7px 12px rgba(0,0,0,.32))}
.primary-nav{display:flex;align-items:center;gap:27px;font-weight:800;font-size:.96rem}
.primary-nav a{text-decoration:none;transition:.2s}.primary-nav a:hover,.primary-nav .active{color:var(--gold)}
.nav-cta{padding:13px 22px;border-radius:999px;background:linear-gradient(135deg,#d938cc,#ff5b9e);box-shadow:0 10px 26px rgba(255,70,177,.3);color:#fff!important}
.menu-button{display:none;border:0;background:rgba(255,255,255,.12);width:45px;height:45px;border-radius:13px;padding:10px}.menu-button span{display:block;height:3px;border-radius:4px;background:#fff;margin:5px 0}


.hero{position:relative;min-height:780px;overflow:hidden;background:
radial-gradient(circle at 18% 18%,rgba(116,96,255,.34),transparent 24rem),
radial-gradient(circle at 88% 18%,rgba(255,126,183,.16),transparent 18rem),
linear-gradient(180deg,#06194a 0%,#0c1f58 55%,#17105c 100%)}
.hero::before{content:"";position:absolute;inset:0;background:url("assets/share.jpg") center/cover no-repeat;opacity:.08;mix-blend-mode:screen;pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:130px;background:linear-gradient(180deg,transparent,#17105c);pointer-events:none}
.hero-inner{min-height:780px;display:grid;grid-template-columns:minmax(360px,470px) minmax(420px,1fr);align-items:center;gap:38px;padding-top:118px;padding-bottom:78px;position:relative;z-index:1}
.hero-copy{position:relative;z-index:2;text-shadow:0 2px 14px rgba(0,8,40,.35)}
.hero-copy::before{content:"";position:absolute;inset:-28px -26px -28px -26px;background:linear-gradient(90deg,rgba(4,22,65,.86) 0%,rgba(4,22,65,.74) 72%,rgba(4,22,65,.0) 100%);border-radius:34px;z-index:-1;box-shadow:0 18px 60px rgba(0,7,36,.22)}
.eyebrow{margin:0 0 12px;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:900}.eyebrow.dark{color:#9d5a2f}
h1,h2{font-family:Georgia,"Times New Roman",serif}
.hero h1{margin:0 0 22px;font-size:clamp(3.6rem,5.3vw,5.6rem);line-height:.92;letter-spacing:-.055em}
.hero h1 span{display:block}.hero h1 span:nth-child(1){color:#ffd864}.hero h1 span:nth-child(2){color:#ff6cbd}.hero h1 span:nth-child(3){font-size:.61em;letter-spacing:-.02em;margin-top:13px;color:#fff}
.hero-copy>p:not(.eyebrow){font-size:1rem;line-height:1.62;color:#f4f5ff;margin:0 0 12px;max-width:42ch}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:25px}
.hero-visual{display:flex;justify-content:flex-end;align-items:flex-end}
.hero-visual-frame{width:min(100%,690px);position:relative}
.hero-visual-frame::before{content:"";position:absolute;inset:auto -18px -28px -18px;height:160px;background:radial-gradient(ellipse at center,rgba(255,181,92,.18),transparent 70%);filter:blur(12px);pointer-events:none}
.hero-visual img{width:100%;height:auto;max-height:680px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 35px rgba(0,0,0,.28))}
.story{position:relative;z-index:3;margin-top:-58px;padding-bottom:65px}
.paper-card{display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:center;padding:23px 30px;border-radius:30px;background:linear-gradient(135deg,#fff9eb,#f8f5ec);color:var(--ink);border:2px solid rgba(228,232,226,.9);box-shadow:var(--shadow);overflow:hidden;position:relative}
.paper-card::before,.paper-card::after{content:"❄";position:absolute;color:#abd3e9;opacity:.55;font-size:4rem}.paper-card::before{right:35px;top:16px}.paper-card::after{right:105px;bottom:4px;font-size:2.3rem}
.story-image-wrap{border-radius:23px;overflow:hidden;box-shadow:0 13px 30px rgba(24,45,92,.22);height:245px}.story-image-wrap img{width:100%;height:100%;object-fit:cover}
.story-copy{position:relative;z-index:1}.story-copy h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.02;margin:0 0 14px;letter-spacing:-.035em}.story-copy p:not(.eyebrow){font-size:1.02rem;line-height:1.6;margin:0;max-width:700px}

.powers{padding:23px 0 72px;background:radial-gradient(circle at 50% 20%,rgba(97,51,192,.42),transparent 36rem),linear-gradient(180deg,#1a0b55,#25106b 70%,#18105b)}
.section-heading{text-align:center;margin:0 auto 28px}.section-heading h2{font-size:clamp(2.7rem,4.6vw,4.8rem);line-height:1;margin:0 0 8px}.section-heading h2 span{color:var(--gold)}.section-heading p{margin:0;color:#e9e5ff;font-size:1.04rem}
.power-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;align-items:end}
.power-card{text-align:center;min-width:0}
.pen-stage{height:355px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:12px 8px 0;border-radius:80px 80px 18px 18px;background:radial-gradient(ellipse at center bottom,var(--glow),transparent 65%)}
.pen-stage::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:22px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 20px var(--accent),inset 0 0 12px var(--accent);opacity:.8}
.pen-stage img{height:325px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 15px var(--accent)) saturate(1.2)}
.power-label{min-height:108px;padding:13px 8px 10px;border-radius:16px;background:linear-gradient(180deg,var(--card1),var(--card2));color:#1a2855;border:1px solid rgba(255,255,255,.65);box-shadow:0 9px 24px rgba(0,0,0,.2)}
.power-label span{display:block;font-size:1.3rem;line-height:1}.power-label h3{font-family:Georgia,serif;font-size:1.18rem;line-height:1.1;margin:6px 0 0}
.red{--accent:#ff382f;--glow:rgba(255,50,39,.38);--card1:#fff2e4;--card2:#f6ddc9}.pink{--accent:#ff4eb3;--glow:rgba(255,57,177,.36);--card1:#fff0f4;--card2:#f1d4df}.orange{--accent:#ff991e;--glow:rgba(255,144,25,.35);--card1:#fff1df;--card2:#f4d9bc}.green{--accent:#7ed52b;--glow:rgba(117,218,45,.34);--card1:#eef6df;--card2:#d8e9be}.lime{--accent:#c6de34;--glow:rgba(199,225,47,.33);--card1:#f6f5db;--card2:#e5e6b8}.blue{--accent:#2faaff;--glow:rgba(33,168,255,.37);--card1:#e6f3ff;--card2:#cbdff3}
.characters-anchor{height:0;scroll-margin-top:80px}

.shop{margin-top:0;margin-bottom:0;padding:42px 36px 38px;background:linear-gradient(145deg,#fff8e8,#f5ead9);color:var(--ink);border-radius:32px 32px 0 0;border:1px solid #f3e2c3;box-shadow:var(--shadow);position:relative;z-index:2}
.shop-heading h2{color:#13275a;font-size:clamp(2.7rem,4.6vw,4.6rem)}.shop-heading p{color:#4f5b78}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.product-card{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:300px;background:#fffdf6;border:1px solid #eadcc5;border-radius:24px;overflow:hidden;box-shadow:0 16px 38px rgba(55,45,78,.13)}
.product-image{height:100%;min-height:300px;padding:18px;background:linear-gradient(145deg,#211364,#351674)}.product-image img{width:100%;height:100%;object-fit:contain;border-radius:15px}.pens-product img{object-fit:cover}
.product-body{padding:26px 24px;text-align:center}.product-body h3{font-family:Georgia,serif;font-size:1.75rem;line-height:1.08;margin:0 0 11px;color:#163064}.product-body p{font-size:.98rem;line-height:1.5;color:#59627b;margin:0 0 19px}.coming-soon{width:100%;min-height:49px;border:0;border-radius:999px;color:#fff;font-weight:900;font-size:1rem;background:linear-gradient(135deg,#d7a65d,#b88d69);cursor:not-allowed}

.final-cta{position:relative;min-height:310px;overflow:hidden;background:#140c53}.final-bg{position:absolute;inset:0}.final-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.35) brightness(.55) hue-rotate(8deg)}.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,83,.98) 0%,rgba(20,12,83,.88) 45%,rgba(20,12,83,.25) 80%),linear-gradient(180deg,rgba(42,15,91,.22),rgba(2,19,70,.5))}
.final-inner{position:relative;z-index:1;min-height:310px;display:flex;align-items:center}.final-inner>div{max-width:660px}.final-cta h2{font-size:clamp(2.7rem,4.5vw,4.5rem);line-height:1.02;margin:0 0 12px}.final-cta h2 span{color:var(--gold)}.final-cta p{font-size:1.08rem;line-height:1.6;color:#eae8ff;margin:0 0 22px}

.site-footer{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#d8def9}.site-footer img{width:165px}.site-footer p{margin:0}.site-footer nav{display:flex;gap:20px}.site-footer a{text-decoration:none}.site-footer a:hover{color:var(--gold)}

@media(max-width:980px){
  .brand img{width:205px}
  .primary-nav{gap:18px;font-size:.88rem}
  .nav-cta{padding:11px 17px}
  .hero{min-height:720px}
  .hero-inner{min-height:720px;grid-template-columns:minmax(320px,430px) minmax(360px,1fr);gap:24px}
  .hero h1{font-size:clamp(3rem,6vw,4.7rem)}
  .hero-copy>p:not(.eyebrow){font-size:.92rem}
  .hero-copy::before{inset:-22px -18px -22px -18px}
  .hero-visual-frame{width:min(100%,610px)}
  .hero-visual img{max-height:600px}
  .power-grid{gap:8px}
  .pen-stage{height:295px}
  .pen-stage img{height:270px}
  .power-label h3{font-size:.96rem}
  .power-label{min-height:96px;padding:11px 5px}
  .product-card{grid-template-columns:1fr}
  .product-image{min-height:220px;height:220px}
  .product-body{padding:22px}
}

@media(max-width:720px){
  .site-header{position:absolute}
  .menu-button{display:block}
  .primary-nav{display:none;position:absolute;top:72px;left:17px;right:17px;padding:16px;flex-direction:column;align-items:stretch;background:#06194a;border-radius:20px;box-shadow:var(--shadow)}
  .primary-nav.open{display:flex}
  .primary-nav a{padding:10px 12px}
  .nav-cta{text-align:center}
  .brand img{width:185px}
  .hero{min-height:auto;padding-top:0}
  .hero::after{display:none}
  .hero-inner{min-height:auto;grid-template-columns:1fr;gap:18px;padding-top:94px;padding-bottom:58px}
  .hero-copy{order:2;width:100%;text-align:center}
  .hero-copy::before{inset:-18px -12px -12px -12px;background:linear-gradient(180deg,rgba(6,25,74,.2),rgba(6,25,74,.96) 22%,rgba(6,25,74,.98) 100%)}
  .hero h1{font-size:clamp(3rem,13vw,4.9rem)}
  .hero-copy>p:not(.eyebrow){max-width:620px;margin:0 auto 12px;font-size:.98rem}
  .hero-actions{justify-content:center}
  .hero-visual{order:1;justify-content:center}
  .hero-visual-frame{width:min(100%,540px)}
  .hero-visual img{max-height:none;width:100%;height:auto}
  .story{margin-top:0;padding-top:20px}
  .paper-card{grid-template-columns:1fr;padding:18px}
  .story-image-wrap{height:220px}
  .story-copy{text-align:center}
  .story-copy h2{font-size:2.4rem}
  .power-grid{grid-template-columns:repeat(2,1fr);gap:13px}
  .pen-stage{height:300px}
  .pen-stage img{height:275px}
  .power-label h3{font-size:1.05rem}
  .shop{padding:37px 15px}
  .shop-grid{grid-template-columns:1fr}
  .product-card{grid-template-columns:1fr}
  .product-image{height:250px}
  .final-inner{text-align:center;justify-content:center}
  .site-footer{flex-direction:column;text-align:center;padding:25px 0}
  .site-footer nav{justify-content:center}
}

@media(max-width:420px){
  .section-shell{width:min(100% - 22px,1180px)}
  .hero-inner{padding-top:88px}
  .hero-copy::before{inset:-12px -6px -10px -6px}
  .hero h1{font-size:3.15rem}
  .hero h1 span:nth-child(3){font-size:.58em}
  .button{width:100%}
  .paper-card h2{font-size:2.1rem}
  .power-grid{gap:8px}
  .pen-stage{height:245px}
  .pen-stage img{height:225px}
  .power-label{min-height:91px}
  .power-label h3{font-size:.9rem}
  .product-image{height:220px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}