/* ─── RESET ────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Outfit',sans-serif;background:#fff;color:#111;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.btn-primary{display:inline-flex;align-items:center;padding:13px 32px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;cursor:pointer;background:#111;color:#fff;border:none;transition:all .4s cubic-bezier(.22,1,.36,1)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1)}

/* ─── NAV ──────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:all .4s ease}
.nav.scrolled{background:rgba(255,255,255,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.04);padding:10px 0}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{width:26px;height:26px;border-radius:50%}
.nav-links{display:flex;gap:28px;font-size:13px;font-weight:500;color:#555}
.nav-links a{transition:color .3s}
.nav-links a:hover{color:#F97316}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.nav-toggle span{width:20px;height:2px;background:#111;border-radius:2px;transition:all .3s}

/* ─── HERO ─────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px;background:#fff}
.hero-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.hero-text{position:relative;z-index:2}
.hero-title{font-size:clamp(34px,5.5vw,64px);font-weight:800;line-height:1.05;letter-spacing:-1.5px;margin-bottom:12px}
.hero-title span{display:block}
.hero-sub{font-size:clamp(20px,2.5vw,32px);font-weight:300;color:#F97316;margin-bottom:16px;letter-spacing:-.3px}
.hero-desc{font-size:15px;color:#888;line-height:1.5;max-width:380px;margin-bottom:32px}
.hero-btn{background:#F97316}
.hero-btn:hover{background:#e85d00}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;perspective:1200px;min-height:500px}
.hero-orb{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.08) 0%,rgba(255,248,243,.4) 50%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.hero-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(249,115,22,.05) 0%,transparent 70%);top:30%;left:40%}
.hero-orb-3{width:250px;height:250px;background:radial-gradient(circle,rgba(255,230,216,.5) 0%,transparent 70%);top:65%;left:55%}

/* ─── PHONE ─────────────────────────────────────────── */
.phone{width:280px;height:570px;position:relative;transform-style:preserve-3d;animation:phoneFloat 6s ease-in-out infinite;z-index:2}
@keyframes phoneFloat{0%,100%{transform:translateY(0) rotateY(-6deg)}50%{transform:translateY(-14px) rotateY(-6deg)}}
.phone-frame{width:100%;height:100%;background:linear-gradient(145deg,#1a1a2e,#16213e,#1a1a2e);border-radius:40px;padding:12px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.15),0 10px 30px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.phone-frame::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.06) 50%,transparent 55%);pointer-events:none;z-index:3;animation:phoneReflect 8s ease-in-out infinite}
@keyframes phoneReflect{0%,100%{transform:translateX(-30%) translateY(-30%)}50%{transform:translateX(30%) translateY(30%)}}
.phone-notch{width:90px;height:22px;background:#111;border-radius:0 0 16px 16px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4}
.phone-screen{width:100%;height:100%;background:#f5f6f8;border-radius:32px;overflow:hidden;display:flex;flex-direction:column}
.ps-header{padding:20px 20px 8px;font-size:14px;font-weight:600;color:#888}
.ps-body{padding:4px 20px 20px;flex:1;display:flex;flex-direction:column;gap:16px}
.ps-welcome{font-size:15px;color:#888;line-height:1.3}
.ps-welcome strong{font-size:22px;color:#111;font-weight:700;display:block;margin-top:2px}
.ps-card{display:flex;align-items:center;gap:12px;background:#fff;padding:14px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ps-card span{font-size:18px}
.ps-card p{font-size:13px;font-weight:600;color:#111}
.ps-card small{font-size:11px;color:#999}
.ps-stats{display:flex;gap:12px}
.ps-stats div{flex:1;text-align:center;background:#fff;padding:12px 8px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ps-stats span{font-size:22px;font-weight:800;color:#F97316;display:block}
.ps-stats small{font-size:11px;color:#999;display:block;margin-top:2px}

/* ─── WHY AAROG ─────────────────────────────────────── */
.why{padding:100px 0;background:#FFF8F3}
.why-content{max-width:720px;margin:0 auto;text-align:center}
.why-content h2{font-size:clamp(18px,1.6vw,22px);font-weight:600;color:#F97316;margin-bottom:40px;letter-spacing:1px;text-transform:uppercase}
.why-content p{font-size:clamp(18px,2.2vw,28px);font-weight:400;color:#111;line-height:1.5;margin-bottom:16px}
.why-light{color:#999;font-weight:300}
.why-em{font-size:clamp(19px,2.4vw,30px);font-weight:500;margin:28px 0;color:#111;font-style:italic}
.why-born{font-size:clamp(22px,2.8vw,36px);font-weight:800;background:linear-gradient(135deg,#F97316,#e85d00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:8px}

/* ─── JOURNEY ──────────────────────────────────────── */
.journey{padding:100px 0;background:#fff;overflow:hidden}
.journey-head{text-align:center;margin-bottom:56px}
.journey-label{font-size:clamp(11px,1vw,13px);font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#F97316;margin-bottom:16px}
.journey-head h2{font-size:clamp(16px,1.8vw,22px);font-weight:400;color:#666;line-height:1.4;max-width:600px;margin:0 auto}
.journey-track{display:flex;justify-content:center;align-items:flex-start;position:relative;padding:0 16px 16px;gap:0}
.j-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;min-width:90px;position:relative}
.j-dot{width:48px;height:48px;border-radius:50%;background:#FFF8F3;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .4s ease;position:relative;z-index:2}
.j-item:hover .j-dot{background:#FFE6D8;transform:scale(1.12)}
.j-item span{font-size:11px;font-weight:600;color:#555;text-align:center;white-space:nowrap}
.j-bar{position:absolute;top:24px;left:calc(50% + 26px);width:calc(100% - 52px);height:2px;background:linear-gradient(90deg,#F97316,rgba(249,115,22,.2));border-radius:2px;pointer-events:none}
.journey-close{text-align:center;margin-top:48px;font-size:clamp(16px,1.6vw,20px);font-weight:500;color:#111;font-style:italic;letter-spacing:-.2px}

/* ─── PRODUCT ──────────────────────────────────────── */
.product{padding:120px 0 160px;background:#FFF8F3;overflow:hidden}
.product-head{text-align:center;margin-bottom:56px;padding:0 24px}
.product-head h2{font-size:clamp(22px,2.8vw,34px);font-weight:800;color:#111;letter-spacing:-.5px}
.product-stage{position:relative;height:480px;max-width:800px;margin:0 auto;perspective:1400px}
.pd-device{position:absolute;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.pd-frame{background:linear-gradient(160deg,#1e1e36,#141428,#1e1e36);border-radius:20px;padding:7px;box-shadow:0 20px 60px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.05);position:relative;overflow:hidden}
.pd-frame::before{content:'';position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.02) 45%,rgba(255,255,255,.05) 50%,transparent 55%);pointer-events:none;z-index:5}
.pd-notch{width:50px;height:14px;background:#111;border-radius:0 0 8px 8px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6}
.pd-screen{background:#f5f6f8;border-radius:15px;overflow:hidden;min-height:80px}
.pd-label{background:rgba(249,115,22,.04);padding:8px 12px;font-size:10px;font-weight:700;color:#F97316;letter-spacing:.5px;border-bottom:1px solid rgba(0,0,0,.03)}
.pd-info{display:flex;align-items:center;gap:10px;padding:10px 12px}
.pd-info span{font-size:16px}
.pd-info p{font-size:12px;font-weight:600;color:#111}
.pd-info small{font-size:10px;color:#999}
.pd-1{width:190px;left:50%;top:50%;transform:translate(-50%,-50%) rotateY(-4deg) translateZ(60px);z-index:3;animation:pd1 7s ease-in-out infinite}
.pd-2{width:150px;left:3%;top:30%;transform:translateY(-40%) rotateY(22deg) translateZ(-10px);z-index:2;animation:pd2 8s ease-in-out infinite}
.pd-3{width:150px;right:3%;top:30%;transform:translateY(-40%) rotateY(-22deg) translateZ(-10px);z-index:2;animation:pd3 7.5s ease-in-out infinite}
.pd-4{width:130px;left:8%;top:72%;transform:translateY(-50%) rotateY(14deg) translateZ(-30px);z-index:1;animation:pd4 9s ease-in-out infinite}
.pd-5{width:200px;right:6%;top:70%;transform:translateY(-50%) rotateY(-14deg) translateZ(-40px);z-index:1;animation:pd5 8.5s ease-in-out infinite}
.pd-frame-wide{border-radius:18px;padding:7px}
@keyframes pd1{0%,100%{transform:translate(-50%,-50%) rotateY(-4deg) translateZ(60px) translateY(0)}50%{transform:translate(-50%,-50%) rotateY(-4deg) translateZ(60px) translateY(-10px)}}
@keyframes pd2{0%,100%{transform:translateY(-40%) rotateY(22deg) translateZ(-10px) translateY(0)}50%{transform:translateY(-40%) rotateY(22deg) translateZ(-10px) translateY(-8px)}}
@keyframes pd3{0%,100%{transform:translateY(-40%) rotateY(-22deg) translateZ(-10px) translateY(0)}50%{transform:translateY(-40%) rotateY(-22deg) translateZ(-10px) translateY(-12px)}}
@keyframes pd4{0%,100%{transform:translateY(-50%) rotateY(14deg) translateZ(-30px) translateY(0)}50%{transform:translateY(-50%) rotateY(14deg) translateZ(-30px) translateY(-6px)}}
@keyframes pd5{0%,100%{transform:translateY(-50%) rotateY(-14deg) translateZ(-40px) translateY(0)}50%{transform:translateY(-50%) rotateY(-14deg) translateZ(-40px) translateY(-8px)}}

/* ─── FOUNDER ──────────────────────────────────────── */
.founder{padding:120px 0;background:#fff;position:relative;overflow:hidden}
.founder-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(249,115,22,.04) 0%,transparent 70%),radial-gradient(ellipse at 70% 50%,rgba(255,248,243,.6) 0%,transparent 70%);pointer-events:none}
.founder-content{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.founder-visual{position:relative;display:flex;justify-content:center;align-items:center}
.founder-frame{position:relative;z-index:1;width:100%;max-width:360px;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#FFF8F3,#FFE6D8);padding:20px 20px 0}
.founder-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,transparent 40%);pointer-events:none;border-radius:24px}
.founder-frame img{width:100%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 8px 32px rgba(0,0,0,.06))}
.founder-card{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:20px 24px;box-shadow:0 12px 40px rgba(0,0,0,.06);z-index:3;width:calc(100% - 48px);max-width:320px}
.founder-card span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#F97316;display:block;margin-bottom:10px}
.founder-card ul li{font-size:13px;color:#444;padding:4px 0;display:flex;align-items:center;gap:8px;line-height:1.4}
.founder-card ul li::before{content:'✓';color:#F97316;font-weight:700}
.founder-text{display:flex;flex-direction:column;gap:18px}
.founder-text p{font-size:clamp(15px,1.3vw,17px);color:#555;line-height:1.7}
.founder-sig{display:flex;align-items:center;gap:16px;margin-top:8px;padding-top:20px;border-top:1px solid rgba(0,0,0,.05)}
.founder-line{width:28px;height:2px;background:#F97316;border-radius:2px;flex-shrink:0}
.founder-sig strong{display:block;font-size:15px;color:#111}
.founder-sig span{font-size:12px;color:#999}
.founder-sig em{display:block;font-size:12px;color:#aaa;font-style:italic;margin-top:2px}

/* ─── SECURITY ──────────────────────────────────────── */
.security{padding:100px 0;background:#FFF8F3}
.security-head{text-align:center;margin-bottom:56px}
.security-head h2{font-size:clamp(24px,3vw,36px);font-weight:800;color:#111;letter-spacing:-.5px}
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.security-card{background:#fff;border-radius:20px;padding:32px 28px;transition:all .4s cubic-bezier(.22,1,.36,1)}
.security-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.04)}
.security-card h3{font-size:17px;font-weight:700;color:#111;margin-bottom:10px;letter-spacing:-.2px}
.security-card p{font-size:14px;color:#666;line-height:1.6;margin-bottom:16px}
.security-card a{font-size:13px;font-weight:600;color:#F97316;transition:color .3s}
.security-card a:hover{color:#e85d00}

/* ─── FAQ ──────────────────────────────────────────── */
.faq{padding:100px 0;background:#fff}
.faq-head{text-align:center;margin-bottom:56px}
.faq-head h2{font-size:clamp(22px,2.8vw,34px);font-weight:800;color:#111;letter-spacing:-.5px}
.faq-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-item{border:1px solid rgba(0,0,0,.04);border-radius:16px;overflow:hidden;transition:border-color .3s}
.faq-item:hover{border-color:rgba(249,115,22,.12)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:#111;background:none;border:none;cursor:pointer;text-align:left;letter-spacing:-.1px;transition:color .3s}
.faq-q:hover{color:#F97316}
.faq-arrow{font-size:18px;color:#999;transition:transform .4s ease;line-height:1}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),padding .4s ease}
.faq-item.open .faq-a{max-height:200px;padding:0 20px 18px}
.faq-a p{font-size:14px;color:#666;line-height:1.6}

/* ─── EARLY ACCESS ─────────────────────────────────── */
.early{padding:100px 0;background:#111;position:relative;overflow:hidden}
.early::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(249,115,22,.06) 0%,transparent 70%);pointer-events:none}
.early-inner{max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:1}
.early-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:#F97316;margin-bottom:20px;padding:7px 18px;border:1px solid rgba(249,115,22,.2);border-radius:50px}
.early-inner h2{font-size:clamp(20px,2.8vw,34px);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.5px;margin-bottom:16px}
.early-inner p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.6;max-width:420px;margin:0 auto 28px}
.early .btn-primary{background:#F97316;font-size:13px;padding:12px 28px}
.early .btn-primary:hover{background:#e85d00}
.early-note{margin-top:24px;font-size:13px;color:rgba(255,255,255,.4)}
.early-note a{color:rgba(255,255,255,.6);text-decoration:underline;transition:color .3s}
.early-note a:hover{color:#fff}

/* ─── FOOTER ───────────────────────────────────────── */
.footer{padding:64px 0 32px;background:#fff}
.footer-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;margin-bottom:40px}
.footer-brand{max-width:240px}
.footer-logo{width:28px;height:28px;border-radius:50%;margin-bottom:10px}
.footer-brand p{font-size:13px;color:#999;line-height:1.5}
.footer-links,.footer-social{display:flex;flex-direction:column;gap:8px}
.footer-links a,.footer-social a{font-size:13px;color:#666;transition:color .3s}
.footer-links a:hover,.footer-social a:hover{color:#F97316}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(0,0,0,.04);font-size:13px;color:#999}
.footer-credit{font-style:italic;color:#bbb}

/* ─── BACK TO TOP ──────────────────────────────────── */
.back-top{position:fixed;bottom:28px;right:28px;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.05);box-shadow:0 4px 16px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .4s cubic-bezier(.22,1,.36,1);z-index:100;color:#888}
.back-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06);color:#F97316}

/* ─── RESPONSIVE ───────────────────────────────────── */
@media(max-width:1024px){
  .hero-inner,.founder-content{grid-template-columns:1fr;gap:48px}
  .hero-visual{order:-1;min-height:400px}
  .product-stage{height:380px}
  .pd-5{width:160px}.pd-1{width:160px}.pd-2,.pd-3{width:130px}.pd-4{width:110px}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);padding:24px;gap:16px;border-bottom:1px solid rgba(0,0,0,.04)}
  .nav-toggle{display:flex}
  .hero{padding:100px 0 60px}
  .hero-title{font-size:clamp(28px,7vw,38px)}
  .hero-visual{min-height:340px}
  .phone{width:220px;height:450px}
  .why-content h2{margin-bottom:28px}
  .why-content p{font-size:clamp(17px,3.5vw,22px)}
  .why{padding:72px 0}
  .journey{padding:72px 0}
  .journey-track{justify-content:flex-start;padding:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .journey-track::-webkit-scrollbar{display:none}
  .journey-head h2{font-size:15px;padding:0 16px}
  .product{padding:80px 0 120px}
  .product-stage{height:340px}
  .product-devices{transform:scale(.7);transform-origin:center top}
  .founder{padding:80px 0}
  .founder-card{position:relative;bottom:auto;left:auto;transform:none;margin:-12px 16px 0;width:auto;max-width:calc(100% - 32px)}
  .founder-content{gap:32px}
  .security-grid{grid-template-columns:1fr}
  .faq-list{padding:0}
  .footer-content{flex-direction:column;gap:24px}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center}
}
@media(max-width:480px){
  .hero-btn{width:100%;text-align:center;justify-content:center}
  .hero-desc{max-width:none}
  .product-stage{height:260px}
  .product-devices{transform:scale(.5);transform-origin:center top}
  .journey-head h2{font-size:13px}
  .security-card{padding:24px}
}