/* futur3board.com: shared styles for the sales page, privacy and terms (dark, like the app) */
:root{
  --bg:#121212; --bg2:#181818; --panel:#202020; --panel2:#262626; --line:#2f2f2f; --line2:#3a3a3a;
  --text:#ececec; --text2:#b9b9b9; --muted:#8a8a8a;
  --accent:#4f7fcf; --accentHi:#6390dc; --orange:#e87d0d; --green:#63c763; --gold:#c7c729;
  --radius:12px; --max:1180px;
  --idea:#83314a; --note:#79461d; --list:#246283; --todo:#2b652b; --table:#3c3c83; --image:#0f5a5a; --url:#5a5314;
  --code:#1f5f4a; --swatch:#5b2f7a; --board:#8a5a1d; --file:#4f4f4f; --frame:#4a4a4a;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;}
a{color:#9cc3ff;text-decoration:none;} a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:"Space Grotesk","Inter",sans-serif;letter-spacing:-.02em;line-height:1.1;margin:0;}
h1{font-size:clamp(38px,6vw,68px);font-weight:700;}
h2{font-size:clamp(28px,4vw,44px);font-weight:700;}
h3{font-size:20px;font-weight:600;}
p{margin:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.muted{color:var(--muted);} .small{font-size:14px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px;}
.lead{font-size:clamp(17px,2vw,20px);color:var(--text2);max-width:640px;}
.f3{font-size:66%;} /* the "3" in Futur3 */

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap;}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 8px 30px rgba(79,127,207,.35);} .btn.primary:hover{background:var(--accentHi);}
.btn.ghost{color:var(--text);border-color:var(--line2);background:rgba(255,255,255,.02);} .btn.ghost:hover{border-color:#5a5a5a;}
.btn svg{width:16px;height:16px;}

/* nav */
nav.top{position:sticky;top:0;z-index:50;background:rgba(18,18,18,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.06);}
nav.top .wrap{display:flex;align-items:center;gap:28px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);} .brand:hover{text-decoration:none;}
.brand .mark{width:22px;height:22px;flex:none;}
.brand .word{height:17px;width:auto;color:#e6e6e6;}
nav.top .links{display:flex;gap:22px;margin-left:auto;font-size:14px;}
nav.top .links a{color:var(--text2);} nav.top .links a:hover{color:var(--text);text-decoration:none;}
nav.top .btn{padding:8px 16px;font-size:14px;}
@media (max-width:860px){ nav.top .links{display:none;} nav.top .btn{margin-left:auto;} }

/* hero */
.hero{position:relative;padding:88px 0 40px;text-align:center;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:720px;background:
  radial-gradient(600px 300px at 30% 30%,rgba(232,125,13,.16),transparent 70%),
  radial-gradient(700px 360px at 70% 20%,rgba(79,127,207,.22),transparent 70%);pointer-events:none;}
.hero .wrap{position:relative;}
.hero h1{margin:18px auto 20px;max-width:900px;}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#f0a64a,#e87d0d 40%,#7fa8ef);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lead{margin:0 auto;}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px;}
.beta{margin-top:14px;font-size:13px;color:var(--muted);}
.shot{position:relative;margin:56px auto 0;max-width:1180px;border-radius:14px;border:1px solid var(--line2);background:#1a1a1a;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03) inset;}
.shot .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#1f1f1f;border-bottom:1px solid var(--line);}
.shot .bar i{width:11px;height:11px;border-radius:50%;background:#3d3d3d;}
.shot .bar span{margin:0 auto;font-size:12px;color:var(--muted);background:#151515;border-radius:6px;padding:2px 40px;}
.shot img{width:100%;height:auto;}

/* sections */
section{padding:110px 0;}
section.alt{background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
.head{max-width:720px;margin-bottom:48px;} .head.center{margin-left:auto;margin-right:auto;text-align:center;}
.head h2{margin:14px 0 16px;}

/* node types */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.type{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.type .h{display:flex;align-items:center;gap:8px;padding:8px 12px;font-weight:600;font-size:14px;color:#f0f0f0;}
.type .h svg{width:16px;height:16px;}
.type p{padding:10px 12px 14px;color:var(--text2);font-size:14px;line-height:1.5;}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;margin-bottom:110px;}
.feature:last-child{margin-bottom:0;}
.feature.flip{grid-template-columns:1.25fr 1fr;} .feature.flip .txt{order:2;}
.feature .txt h3{font-size:clamp(24px,3vw,32px);margin:12px 0 14px;font-family:"Space Grotesk","Inter",sans-serif;}
.feature .txt p{color:var(--text2);}
.feature ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;}
.feature li{position:relative;padding-left:26px;color:var(--text2);font-size:15px;}
.feature li::before{content:"";position:absolute;left:4px;top:9px;width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);}
.frame{border-radius:12px;border:1px solid var(--line2);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#1a1a1a;aspect-ratio:14/9;}
.frame img{width:100%;height:100%;object-fit:cover;object-position:center;}
@media (max-width:900px){ .feature,.feature.flip{grid-template-columns:1fr;gap:28px;margin-bottom:80px;} .feature.flip .txt{order:0;} }

/* examples */
.examples{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:760px){ .examples{grid-template-columns:1fr;} }
.ex{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--text);transition:border-color .15s,transform .15s;}
.ex:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-3px);}
.ex .pic{aspect-ratio:14/9;overflow:hidden;background:#1a1a1a;border-bottom:1px solid var(--line);}
.ex .pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;} .ex:hover .pic img{transform:scale(1.04);}
.ex .c{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ex .c b{font-size:17px;font-family:"Space Grotesk","Inter",sans-serif;}
.ex .c span{color:var(--text2);font-size:14px;line-height:1.5;}
.ex .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.ex .tags i{font-style:normal;font-size:12px;color:#d4d4d4;background:#303030;border-radius:999px;padding:2px 9px;}
.ex .go{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:#9cc3ff;}

/* cards (privacy, claude) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px;}
.card .ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;background:#2b2b2b;}
.card .ic svg{width:22px;height:22px;}
.card h3{margin-bottom:10px;} .card p{color:var(--text2);font-size:15px;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:32px;} }
.prompt{background:#1b1b1b;border:1px solid var(--line2);border-radius:12px;padding:22px;font-size:15px;color:var(--text2);position:relative;}
.prompt .who{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;}
.prompt p+.who{margin-top:18px;}
.prompt code{background:#2a2a2a;border-radius:5px;padding:1px 6px;font-size:13px;color:#e6e6e6;}

/* pricing */
.price{max-width:460px;margin:0 auto;background:linear-gradient(180deg,#232323,#1d1d1d);border:1px solid var(--line2);border-radius:16px;padding:34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.price .amt{font-family:"Space Grotesk",sans-serif;font-size:60px;font-weight:700;margin:6px 0 0;}
.price .amt small{font-size:18px;color:var(--muted);font-weight:500;}
.price ul{list-style:none;padding:0;margin:24px 0 28px;text-align:left;display:grid;gap:10px;}
.price li{padding-left:28px;position:relative;color:var(--text2);font-size:15px;}
.price li::before{content:"";position:absolute;left:6px;top:6px;width:7px;height:12px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg);}
.price .note{font-size:13px;color:var(--muted);margin-top:14px;}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px;}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 20px;}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--muted);font-size:20px;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{color:var(--text2);padding:0 0 18px;font-size:15px;}

/* closing + footer */
.closing{text-align:center;}
.closing h2{margin:0 auto 18px;max-width:760px;}
footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--muted);font-size:14px;}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;}
footer .links{display:flex;gap:22px;margin-left:auto;} footer a{color:var(--text2);}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:70px 24px 90px;}
.legal h1{font-size:clamp(34px,5vw,48px);margin-bottom:8px;}
.legal h2{font-size:22px;margin:40px 0 12px;}
.legal p,.legal li{color:var(--text2);margin:0 0 12px;}
.legal ul{padding-left:22px;margin:0 0 12px;}
.legal .seeboard{border:1px solid var(--line,#33333a);border-left:3px solid #70b2ff;border-radius:8px;padding:12px 14px;margin:18px 0 6px;}
.legal .draft{background:#3a2a12;border:1px solid #6b4a1a;color:#f0c890;border-radius:8px;padding:12px 16px;margin:24px 0;font-size:14px;}