@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@300;400;600;800&display=swap";@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap";:root{--color-parchment-rgb:253, 248, 243;--color-roast-rgb:45, 30, 20;--color-espresso-rgb:111, 78, 55;--color-cork-rgb:230, 204, 178;--color-sage-rgb:132, 146, 124;--color-amber-rgb:212, 163, 115;--color-parchment:rgb(var(--color-parchment-rgb));--color-roast:rgb(var(--color-roast-rgb));--color-espresso:rgb(var(--color-espresso-rgb));--color-cork:rgb(var(--color-cork-rgb));--color-sage:rgb(var(--color-sage-rgb));--color-amber:rgb(var(--color-amber-rgb));--color-hardware:#1a1a1a;--color-black-rgb:0, 0, 0;--color-white-rgb:255, 255, 255;--color-black:rgb(var(--color-black-rgb));--color-white:rgb(var(--color-white-rgb));--font-main:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-heading:"Outfit", sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-lg:20px;--radius-md:12px;--container-max:1200px;--bg-color:var(--color-parchment);--text-primary:var(--color-roast);--text-secondary:rgba(var(--color-roast-rgb), .7);--accent-color:var(--color-espresso);--accent-glow:rgba(var(--color-espresso-rgb), .2);--glass-bg:rgba(var(--color-parchment-rgb), .7);--glass-border:rgba(var(--color-espresso-rgb), .1);--card-blur:12px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);line-height:1.6}body:before{content:"";opacity:.03;pointer-events:none;z-index:9999;background-image:url(https://www.transparenttextures.com/patterns/natural-paper.png);width:100%;height:100%;position:fixed;top:0;left:0}h1,h2,h3{font-family:var(--font-heading);font-weight:800}.container{max-width:var(--container-max);margin:0 auto;padding:0 2rem}.hero{align-items:center;min-height:80vh;padding-top:60px;display:flex}.hero .container{align-items:center;gap:4rem;display:flex}.hero-content{flex:1}.hero h1{letter-spacing:-.02em;color:var(--color-roast);margin-bottom:1.5rem;font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.1}.tagline{color:var(--color-espresso);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;font-size:.8rem;font-weight:700;display:block}.hero p{color:var(--text-secondary);max-width:540px;margin-bottom:2.5rem;font-size:1.25rem}.hero-actions{align-items:center;gap:.75rem;display:flex}.hero-badge{width:auto;height:44px;transition:transform .3s;display:block}.hero-badge:hover{transform:translateY(-2px)}.badge-link{text-decoration:none;display:block}.hero-visual{flex:1;justify-content:center;display:flex}.device-mockup{perspective:1000px;width:100%;max-width:320px;transition:transform .1s ease-out}#hero-img{border:7px solid var(--color-hardware);background:var(--color-black);width:100%;height:auto;box-shadow:0 40px 80px rgba(var(--color-espresso-rgb), .08);border-radius:36px;display:block}.btn{border-radius:100px;padding:.8rem 1.8rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .3s;display:inline-block}.btn.primary{background:var(--color-espresso);color:#fff}.btn.primary:hover{background:var(--color-roast);transform:translateY(-2px)}.btn.secondary{color:var(--color-espresso);border:1px solid var(--color-espresso);background:0 0}.btn.secondary:hover{background:#6f4e370d;transform:translateY(-2px)}@media (width<=968px){.hero .container{text-align:center;flex-direction:column;gap:3rem}.hero-content{flex-direction:column;align-items:center;display:flex}.hero-actions{justify-content:center}}.story-section{padding:2rem 0 4rem}.story-item{opacity:0;grid-template-columns:1fr 1fr;align-items:flex-start;gap:4rem;min-height:80vh;margin-bottom:8rem;transition:all 1s cubic-bezier(.165,.84,.44,1);display:grid;transform:translateY(30px)}.story-item.visible{opacity:1;transform:translateY(0)}.story-visual{padding-bottom:10vh;display:flex;position:sticky;top:15vh}.story-item:nth-child(odd) .story-visual{grid-area:1/1;justify-content:flex-start}.story-item:nth-child(odd) .story-text{text-align:left;grid-area:1/2}.story-item:nth-child(2n) .story-visual{grid-area:1/2;justify-content:flex-end}.story-item:nth-child(2n) .story-text{text-align:right;grid-area:1/1}.story-item:nth-child(2n) .story-text p{margin-left:auto}.story-visual img{border:10px solid var(--color-hardware);background:var(--color-black);width:100%;max-width:320px;height:auto;box-shadow:0 40px 80px rgba(var(--color-espresso-rgb), .12);border-radius:48px;transition:transform .5s}.story-item:hover .story-visual img{transform:scale(1.02)translateY(-10px)}.story-text{padding-top:15vh;padding-bottom:20vh}.story-text h2{background:linear-gradient(135deg, var(--color-roast) 0%, var(--color-espresso) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.1}.story-text p{color:var(--text-secondary);max-width:480px;font-size:1.25rem;line-height:1.6}@media (width<=968px){.story-item{text-align:center;grid-template-columns:1fr;gap:2rem;min-height:auto;margin-bottom:6rem}.story-visual{padding-bottom:0;position:relative;top:0;grid-area:1/1!important;justify-content:center!important}.story-text{padding-top:2rem;padding-bottom:4rem;text-align:center!important;grid-area:2/1!important}.story-text p{margin:0 auto}.story-item:nth-child(2n) .story-text p{margin-right:auto}}.status-badge.planned{background:var(--glass-bg);color:var(--text-secondary);border:1px solid var(--glass-border)}.roadmap{border-top:1px solid var(--glass-border);padding:4rem 0 6rem}.roadmap-header{text-align:center;margin-bottom:3rem}.roadmap-header h2{margin-bottom:1rem;font-size:2.5rem}.timeline{max-width:800px;margin:0 auto;position:relative}.timeline:before{content:"";background:linear-gradient(to bottom, transparent, var(--glass-border) 10%, var(--glass-border) 90%, transparent);width:2px;height:100%;position:absolute;left:50%;transform:translate(-50%)}.timeline-item{width:50%;margin-bottom:4rem;padding:0 2rem;position:relative}.timeline-item:nth-child(odd){text-align:right;left:0}.timeline-item:nth-child(2n){text-align:left;left:50%}.timeline-dot{background-color:var(--color-espresso);z-index:10;border-radius:50%;width:12px;height:12px;position:absolute;top:10px}.timeline-item:nth-child(odd) .timeline-dot{right:-6px}.timeline-item:nth-child(2n) .timeline-dot{left:-6px}.timeline-content{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(var(--card-blur));backdrop-filter:blur(var(--card-blur));border-radius:var(--radius-lg);padding:2rem;transition:all .3s}.timeline-content:hover{border-color:var(--accent-color);background:#fdf8f31a;transform:translateY(-5px)}.phase-tag{color:var(--accent-color);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem;font-size:.75rem;font-weight:700;display:inline-block}.status-badge{text-transform:uppercase;vertical-align:middle;letter-spacing:.5px;border-radius:4px;margin-left:.5rem;padding:.15rem .4rem;font-size:.8rem;font-weight:800;display:inline-block}.status-badge.completed{background-color:var(--color-sage);color:var(--color-roast)}.status-badge.in-progress{background-color:var(--color-amber);color:var(--color-roast)}.timeline-content h3{color:var(--text-primary);margin-bottom:.5rem}.timeline-content p{color:var(--text-secondary);font-size:.95rem}.footer{border-top:1px solid var(--color-cork);background-color:var(--color-parchment);padding:4rem 0}.footer-top{border-bottom:1px solid rgba(var(--color-espresso-rgb), .1);justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;display:flex}.footer-brand{font-family:var(--font-heading);letter-spacing:2px;color:var(--color-roast);font-size:1.2rem;font-weight:800}.footer-links{gap:2rem;display:flex}.footer-links a{color:var(--color-espresso);font-size:.9rem;font-weight:600;text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--color-roast)}.footer-bottom{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.signature{font-family:var(--font-mono);font-size:.8rem}@media (width<=768px){.footer-top,.footer-bottom{text-align:center;flex-direction:column;gap:1.5rem}.timeline:before{left:20px}.timeline-item{width:100%;padding-left:50px;text-align:left!important;left:0!important}.timeline-dot{left:14px!important}}
