/* ============================================================
   Aura Note — Antigravity-Matched Design System
   White hero, sparse particles, soft blue feature cards
   ============================================================ */

:root {
  --color-bg: #f8f9fa;
  --color-bg-blue: #eef1f8;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #5f6368;
  --color-text-light: #9aa0a6;
  --color-border: rgba(0,0,0,0.06);

  --font-sans: 'Inter', -apple-system, 'Microsoft YaHei', sans-serif;
  --font-display: 'Outfit', -apple-system, 'Microsoft YaHei', sans-serif;

  --container: 1200px;
  --header-h: 64px;

  --spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ============================================================
   Fixed particle canvas (sparse dots on white)
   ============================================================ */
#particle-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}

/* ============================================================
   Navigation — White bg, dark text (like Antigravity)
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:200;
  background:rgba(248,249,250,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow 0.3s;
}
.site-header.scrolled{box-shadow:0 1px 12px rgba(0,0,0,0.06)}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  width:min(100% - 48px, var(--container));height:var(--header-h);margin:0 auto;
}
.brand{
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  letter-spacing:-0.03em;color:var(--color-text);
  display:flex;align-items:center;gap:2px;
}
.brand-icon{font-size:1.1rem;color:#4285F4}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a:not(.nav-button){
  font-size:0.88rem;font-weight:500;color:var(--color-text-muted);transition:color 0.2s;
}
.nav-links a:not(.nav-button):hover{color:var(--color-text)}
.nav-button{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;background:#1a1a1a;color:#fff;
  border-radius:9999px;font-size:0.85rem;font-weight:600;
  transition:background 0.2s,transform 0.2s;
}
.nav-button:hover{background:#333;transform:translateY(-1px)}
.nav-button svg{flex-shrink:0}

/* ============================================================
   Hero — WHITE bg, centered, like Antigravity exactly
   ============================================================ */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;padding:var(--header-h) 24px 0;
  background:var(--color-bg);
}
.hero-center{text-align:center;max-width:800px}
.hero-logo{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:32px;
}
.hero-logo-icon{
  font-size:1.4rem;
  background:linear-gradient(135deg,#4285F4,#34A853);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-logo-text{
  font-family:var(--font-display);font-size:1.1rem;font-weight:500;
  color:var(--color-text-muted);letter-spacing:-0.02em;
}
.hero-headline{
  font-family:var(--font-display);
  font-size:clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight:400;line-height:1.12;letter-spacing:-0.03em;
  color:var(--color-text);margin-bottom:48px;
}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 32px;background:#1a1a1a;color:#fff;
  border-radius:16px;font-family:var(--font-sans);font-weight:600;font-size:0.95rem;
  transition:transform 0.3s var(--spring),box-shadow 0.3s;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.btn-primary svg{flex-shrink:0;opacity:0.7}
.btn-outline{
  display:inline-flex;align-items:center;
  height:56px;padding:0 32px;background:transparent;color:var(--color-text);
  border:1.5px solid rgba(0,0,0,0.15);border-radius:16px;
  font-family:var(--font-sans);font-weight:600;font-size:0.95rem;
  transition:border-color 0.2s,background 0.2s,transform 0.3s var(--spring);
}
.btn-outline:hover{border-color:rgba(0,0,0,0.3);background:rgba(0,0,0,0.02);transform:translateY(-2px)}

/* ============================================================
   Orbit Strip — Varied size icons, like Antigravity
   ============================================================ */
.orbit-section{
  background:var(--color-bg);overflow:hidden;padding:48px 0;
  position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.orbit-track{
  display:flex;align-items:center;gap:12px;width:max-content;
  animation:orbitScroll 35s linear infinite;
}
.orbit-icon{
  border-radius:50%;background:rgba(0,0,0,0.04);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform 0.3s var(--spring),background 0.3s;
}
.orbit-icon:hover{transform:scale(1.12);background:rgba(0,0,0,0.08)}
.orbit-icon svg{color:#3c4043}
/* Varied sizes like Antigravity */
.orbit-sm{width:52px;height:52px}.orbit-sm svg{width:20px;height:20px}
.orbit-md{width:68px;height:68px}.orbit-md svg{width:24px;height:24px}
.orbit-lg{width:88px;height:88px}.orbit-lg svg{width:30px;height:30px}
.orbit-xl{width:108px;height:108px}.orbit-xl svg{width:36px;height:36px}
@keyframes orbitScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   Editorial — Left-aligned, large text + colorful cursor
   ============================================================ */
.editorial-section{
  background:var(--color-bg);padding:100px 0 120px;position:relative;z-index:1;
}
.editorial-inner{
  width:min(100% - 48px, var(--container));margin:0 auto;
}
.editorial-headline{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:400;line-height:1.25;letter-spacing:-0.02em;
  color:var(--color-text);max-width:780px;
}
.editorial-headline::after{
  content:'|';font-weight:300;margin-left:2px;
  background:linear-gradient(180deg,#4285F4,#EA4335,#FBBC05,#34A853);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:blink 1s step-end infinite;
}
.editorial-headline.done::after{display:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ============================================================
   Feature Rows — Large soft gradient cards (Antigravity style)
   ============================================================ */
.features-section{position:relative;z-index:1}
.feat-row{
  display:grid;grid-template-columns:1fr 1.2fr;align-items:center;
  gap:64px;
  width:min(100% - 48px, var(--container));margin:0 auto;
  padding:80px 0;min-height:90vh;
}
.feat-row--reverse{grid-template-columns:1.2fr 1fr}
.feat-row--reverse .feat-text{order:2}
.feat-row--reverse .feat-card{order:1}

.feat-title{
  font-family:var(--font-display);font-size:clamp(2.2rem,3.5vw,3rem);
  font-weight:400;letter-spacing:-0.025em;line-height:1.1;
  color:var(--color-text);margin-bottom:20px;
}
.feat-desc{
  font-size:0.95rem;line-height:1.8;color:var(--color-text-muted);
  max-width:420px;margin-bottom:28px;
}
.feat-link{
  font-size:0.88rem;font-weight:500;color:var(--color-text);
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity 0.2s;
}
.feat-link:hover{opacity:0.6}

/* Feature card — large soft blue/purple gradient background */
.feat-card{
  opacity:0;transform:translateY(30px);
  transition:opacity 0.8s var(--spring),transform 0.8s var(--spring);
}
.feat-card.in-view{opacity:1;transform:translateY(0)}

.feat-card-inner{
  border-radius:32px;overflow:hidden;aspect-ratio:4/3.2;
  display:flex;align-items:center;justify-content:center;
  padding:40px;position:relative;
}
/* Color themes — soft gradient backgrounds like Antigravity */
.feat-card--blue{
  background:linear-gradient(135deg,#e8edfb 0%,#d6dff7 40%,#c5d4f5 100%);
}
.feat-card--purple{
  background:linear-gradient(135deg,#eee8fb 0%,#dfd6f7 40%,#d0c5f5 100%);
}
.feat-card--green{
  background:linear-gradient(135deg,#e2f5e9 0%,#d0efd9 40%,#bde8ca 100%);
}
.feat-card--orange{
  background:linear-gradient(135deg,#fef3e2 0%,#fce8cc 40%,#faddb5 100%);
}

/* Mockup inside card */
.feat-mockup{
  width:min(380px,100%);border-radius:14px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 8px 40px rgba(0,0,0,0.08);overflow:hidden;
  backdrop-filter:blur(8px);
}
.feat-mockup.ghost{opacity:0.55;background:rgba(255,255,255,0.6)}
.mockup-bar{
  height:36px;display:flex;align-items:center;gap:5px;
  padding:0 14px;border-bottom:1px solid rgba(0,0,0,0.04);
}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-r{background:#ff5f56}.dot-y{background:#ffbd2e}.dot-g{background:#27c93f}
.mockup-title{font-size:0.65rem;font-weight:600;color:var(--color-text-light);margin-left:6px}
.mockup-body{padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.m-task{
  display:flex;align-items:center;gap:7px;padding:7px 9px;
  border-radius:7px;background:rgba(0,0,0,0.018);font-size:0.73rem;color:var(--color-text);
}
.m-task.done span:nth-child(2){text-decoration:line-through;color:var(--color-text-light)}
.m-chk{
  width:13px;height:13px;border-radius:3px;border:1.5px solid rgba(0,0,0,0.18);flex-shrink:0;
  position:relative;
}
.m-chk.on{background:var(--color-text);border-color:var(--color-text)}
.m-chk.on::after{
  content:'';position:absolute;top:1.5px;left:2.5px;
  width:5px;height:3.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}
.m-tag{font-size:0.56rem;font-weight:600;padding:2px 6px;border-radius:9999px;margin-left:auto;flex-shrink:0}
.m-tag.blue{background:#e8f0fe;color:#4285f4}
.m-tag.red{background:#fce8e6;color:#ea4335}
.m-tag.yellow{background:#fef3c7;color:#d97706}
.m-badge{font-size:0.56rem;color:var(--color-text-light);margin-left:auto;flex-shrink:0}
.m-badge.active{background:#fce8e6;color:#ea4335;padding:2px 6px;border-radius:9999px}
.m-local{
  display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:7px;
  background:#e6f4ea;color:#1a7f3c;font-size:0.68rem;font-weight:600;margin-bottom:2px;
}

/* ============================================================
   Install
   ============================================================ */
.install-section{background:var(--color-surface);padding:140px 0;position:relative;z-index:1}
.install-inner{
  width:min(100% - 48px, var(--container));margin:0 auto;
  display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;
}
.section-label{
  font-size:0.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--color-text-light);margin-bottom:14px;
}
.install-title{
  font-family:var(--font-display);font-size:clamp(2.2rem,3.5vw,3rem);
  font-weight:400;letter-spacing:-0.025em;line-height:1.1;margin-bottom:16px;
}
.install-desc{font-size:0.95rem;line-height:1.75;color:var(--color-text-muted)}
.install-steps{display:flex;flex-direction:column;gap:16px}
.step-card{
  display:flex;gap:24px;padding:28px 32px;background:var(--color-bg);
  border-radius:20px;transition:transform 0.3s var(--spring),background 0.2s;
}
.step-card:hover{transform:translateY(-3px);background:#eef0f3}
.step-num{font-size:1.1rem;font-weight:300;color:var(--color-text-light);font-family:monospace;flex-shrink:0}
.step-body h4{font-family:var(--font-display);font-weight:600;font-size:0.95rem;margin-bottom:6px}
.step-body p{font-size:0.85rem;color:var(--color-text-muted);margin:0}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{background:var(--color-surface);padding:140px 0;position:relative;z-index:1}
.faq-inner{width:min(100% - 48px, var(--container));margin:0 auto}
.faq-header{margin-bottom:48px}
.faq-title{
  font-family:var(--font-display);font-size:clamp(2.2rem,3.5vw,3rem);
  font-weight:400;letter-spacing:-0.025em;
}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.faq-card{
  padding:32px 36px;background:var(--color-bg);border-radius:20px;
  transition:transform 0.3s var(--spring),background 0.2s;
}
.faq-card:hover{transform:translateY(-3px);background:#eef0f3}
.faq-card h4{font-family:var(--font-display);font-weight:600;font-size:0.95rem;margin-bottom:10px}
.faq-card p{font-size:0.85rem;line-height:1.72;color:var(--color-text-muted);margin:0}

/* ============================================================
   Download CTA
   ============================================================ */
.download-section{background:var(--color-surface);padding:40px 0 140px;position:relative;z-index:1}
.download-card-new{
  position:relative;text-align:center;padding:110px 48px;
  background:#0a0a0a;border-radius:40px;overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.2);
  width:min(100% - 48px, var(--container));margin:0 auto;
}
#particle-canvas-dark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.download-content{
  position:relative;z-index:1;max-width:540px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.download-content h2{
  font-family:var(--font-display);color:#fff;
  font-size:clamp(2rem,4vw,3.4rem);font-weight:400;letter-spacing:-0.025em;
}
.download-content>p{color:rgba(255,255,255,0.5);font-size:0.9rem}
.btn-white{
  display:inline-flex;align-items:center;gap:8px;
  height:56px;padding:0 32px;background:#fff;color:#111;border-radius:16px;
  font-family:var(--font-sans);font-weight:600;font-size:0.95rem;
  transition:transform 0.3s var(--spring),box-shadow 0.3s;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);margin-top:8px;
}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,0.3)}
.dl-meta{font-size:0.76rem;color:rgba(255,255,255,0.3)}
.dl-alt{font-size:0.78rem;color:rgba(255,255,255,0.5);text-decoration:underline;text-underline-offset:3px;transition:color 0.2s}
.dl-alt:hover{color:rgba(255,255,255,0.8)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:64px 0 40px;position:relative;z-index:1}
.footer-inner{
  width:min(100% - 48px, var(--container));margin:0 auto 48px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
}
.brand-footer{font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-0.03em;color:var(--color-text);display:block;margin-bottom:10px}
.footer-slogan{font-size:0.88rem;color:var(--color-text-muted)}
.footer-desc{font-size:0.8rem;color:var(--color-text-light);margin-top:4px}
.footer-contact{display:inline-block;margin-top:14px;font-size:0.78rem;color:var(--color-text-light);transition:color 0.2s}
.footer-contact:hover{color:var(--color-text)}
.footer-col-title{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-light);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:var(--color-text-muted);font-size:0.85rem;transition:color 0.2s}
.footer-links a:hover{color:var(--color-text)}
.footer-bottom{
  width:min(100% - 48px, var(--container));margin:0 auto;
  padding-top:24px;border-top:1px solid var(--color-border);
  text-align:center;font-size:0.76rem;color:var(--color-text-light);
}

/* ============================================================
   Reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.6s var(--spring),transform 0.6s var(--spring);will-change:transform,opacity}
.reveal.active{opacity:1;transform:translateY(0);will-change:auto}
.delay-1{transition-delay:0.1s}.delay-2{transition-delay:0.2s}.delay-3{transition-delay:0.3s}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .feat-row,.feat-row--reverse{grid-template-columns:1fr;min-height:auto;gap:40px;padding:60px 0}
  .feat-row--reverse .feat-text{order:1}.feat-row--reverse .feat-card{order:2}
  .install-inner{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  .faq-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:36px}
  .download-card-new{padding:80px 24px;border-radius:32px}
  .install-section,.faq-section{padding:100px 0}
}
@media(max-width:480px){
  .nav-links a:not(.nav-button){display:none}
  .hero-headline{font-size:2.4rem}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn-primary,.hero-actions .btn-outline{width:100%;justify-content:center}
  .step-card{padding:20px 18px}.faq-card{padding:24px 20px}
  .download-card-new{padding:60px 18px;border-radius:24px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .reveal,.feat-card{opacity:1;transform:none}
}