*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
font-family:Inter,Segoe UI,Arial,sans-serif;
background:#071225;
color:#f7f7fb;
line-height:1.6
}

.wrap{
width:min(1160px,calc(100% - 40px));
margin:auto
}


/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(6,15,32,.96);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08)
}

.nav-wrap{
min-height:92px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}


/* BRAND WORDMARK */

.brand-wordmark{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
font-weight:1000;
font-size:1.55rem;
letter-spacing:-.04em;
white-space:nowrap
}

.brand-the{
color:#ff9500
}

.brand-little{
color:#fff3df
}

.brand-toy{
background:linear-gradient(90deg,#ff8a00,#6fd23b,#16a9ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent
}

.brand-lab{
background:linear-gradient(90deg,#a64dff,#ff3e9f,#21a2ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent
}


/* NAV */

.nav{
display:flex;
gap:30px;
align-items:center
}

.nav a{
color:#fff;
text-decoration:none;
font-weight:800;
font-size:.95rem;
transition:.2s
}

.nav a:hover,
.nav a.active{
color:#ff9a00
}


/* HERO */

.hero,
.page-hero{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 75% 25%,rgba(125,55,255,.22),transparent 34%),
radial-gradient(circle at 20% 15%,rgba(0,144,255,.19),transparent 32%),
linear-gradient(135deg,#06101f,#0a1831 60%,#101039)
}

.hero{
padding:86px 0 100px
}

.page-hero{
padding:72px 0 76px
}

.hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:64px;
align-items:center
}

.eyebrow{
display:inline-block;
font-size:.78rem;
letter-spacing:.18em;
font-weight:900;
color:#ff9a00;
margin-bottom:16px
}

.hero h1,
.page-hero h1,
.section h2{
margin:0;
line-height:.98;
letter-spacing:-.04em
}

.hero h1{
font-size:clamp(3.4rem,8vw,6.8rem);
max-width:760px
}

.page-hero h1{
font-size:clamp(3rem,7vw,5.8rem);
max-width:850px
}

.hero h1 span,
.accent-text{
background:linear-gradient(
90deg,
#ff8a00,
#ff38a5,
#7b5cff,
#19a8ff
);
-webkit-background-clip:text;
background-clip:text;
color:transparent
}

.hero p,
.page-hero p{
font-size:1.16rem;
max-width:730px;
color:#c9d2e3;
margin:26px 0 30px
}

.hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap
}


/* BUTTONS */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:14px;
font-weight:900;
text-decoration:none;
transition:.2s
}

.btn-primary{
background:linear-gradient(90deg,#ff8a00,#ff5a36);
color:#08101f;
box-shadow:0 12px 32px rgba(255,112,0,.22)
}

.btn-primary:hover{
transform:translateY(-2px)
}

.btn-ghost{
color:#fff;
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.05)
}

.tagline{
margin-top:28px;
font-weight:900;
letter-spacing:.13em;
color:#fff;
font-size:.78rem
}


/* MAIN LOGO */

.hero-art{
display:flex;
justify-content:center;
align-items:center
}

.logo-card{
padding:18px;
border-radius:36px;
background:linear-gradient(
145deg,
rgba(255,255,255,.09),
rgba(255,255,255,.025)
);
border:1px solid rgba(255,255,255,.12);
box-shadow:
0 30px 80px rgba(0,0,0,.45),
inset 0 1px rgba(255,255,255,.15);
transform:rotate(1.2deg);
max-width:100%
}

.logo-card img{
width:min(510px,100%);
height:auto;
display:block;
border-radius:28px
}


/* SECTIONS */

.section{
padding:88px 0;
background:#0b1730
}

.section-dark{
background:linear-gradient(
135deg,
#08111f,
#11183d
)
}

.section-heading{
max-width:780px;
margin-bottom:42px
}

.section h2{
font-size:clamp(2.4rem,5vw,4.6rem)
}

.section-heading p,
.split p,
.contact-box p,
.prose p,
.prose li{
color:#b9c4d7;
font-size:1.04rem
}


/* CARDS */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px
}

.card,
.policy-card{
padding:30px;
border-radius:24px;
background:linear-gradient(
160deg,
rgba(255,255,255,.075),
rgba(255,255,255,.03)
);
border:1px solid rgba(255,255,255,.09)
}

.card{
min-height:240px
}

.card .icon{
font-size:2.4rem
}

.card h3{
font-size:1.5rem;
margin:16px 0 8px
}

.card p{
margin:0;
color:#b7c2d4
}


/* LAB */

.split{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center
}

.lab-panel{
display:grid;
gap:14px
}

.lab-panel div{
display:flex;
align-items:center;
gap:18px;
padding:20px 24px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.09)
}

.lab-panel strong{
font-size:2rem;
color:#ff8a00
}

.lab-panel span{
font-size:1.2rem;
font-weight:900
}


/* CONTACT */

.contact-section{
background:#0c1831
}

.contact-box{
display:flex;
justify-content:space-between;
gap:30px;
align-items:center;
padding:40px;
border-radius:28px;
background:linear-gradient(
120deg,
rgba(255,138,0,.12),
rgba(111,72,255,.12)
);
border:1px solid rgba(255,255,255,.1)
}

.contact-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px
}

.small-link{
color:#cbd5e6;
text-decoration:none;
font-weight:700
}


/* POLICY / FAQ CONTENT */

.prose{
max-width:900px
}

.prose h2{
font-size:2rem;
margin-top:42px
}

.prose h3{
font-size:1.35rem;
margin-top:28px
}

.notice{
padding:20px 22px;
border-left:4px solid #ff9200;
background:rgba(255,146,0,.08);
border-radius:12px;
margin:24px 0
}

.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px
}

.faq details{
padding:18px 20px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
margin-bottom:12px
}

.faq summary{
cursor:pointer;
font-weight:900
}


/* FOOTER */

.footer-links{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:8px
}

.footer-links a{
color:#9aa8bc;
text-decoration:none;
font-size:.84rem
}

.footer-links a:hover{
color:#ff9a00
}

footer{
background:#050b16;
border-top:1px solid rgba(255,255,255,.07);
padding:34px 0
}

.footer-wrap{
display:grid;
grid-template-columns:auto 1fr auto;
gap:18px;
align-items:center
}

.footer-wrap img{
width:58px;
height:58px;
object-fit:contain
}

.footer-wrap div{
display:flex;
flex-direction:column
}

.footer-wrap span,
.footer-wrap p{
color:#8795aa;
font-size:.88rem
}

.footer-wrap p{
margin:0;
text-align:right
}


/* ============================= */
/* MOBILE */
/* ============================= */

@media(max-width:850px){

body{
overflow-x:hidden
}

.wrap{
width:calc(100% - 32px)
}


/* MOBILE HEADER */

.nav-wrap{
min-height:86px
}

.brand-wordmark{
font-size:1.18rem;
gap:5px
}

.nav{
display:none
}


/* MOBILE HERO */

.hero{
padding:54px 0 64px
}

.hero-grid{
display:flex;
flex-direction:column;
gap:38px;
align-items:stretch
}


/*
IMPORTANT:
Text now stays FIRST.
Logo comes AFTER the headline/content.
*/

.hero-copy{
order:1;
width:100%
}

.hero-art{
order:2;
width:100%;
justify-content:center;
margin-top:4px
}

.hero h1{
font-size:clamp(3rem,15vw,4.5rem);
line-height:.94
}

.hero p{
font-size:1rem;
line-height:1.65;
margin:22px 0 26px
}

.eyebrow{
font-size:.69rem;
line-height:1.5;
letter-spacing:.15em
}


/* MOBILE LOGO */

.logo-card{
width:min(320px,88vw);
padding:9px;
border-radius:24px;
transform:none;
margin:0 auto;
box-shadow:
0 18px 45px rgba(0,0,0,.35),
inset 0 1px rgba(255,255,255,.12)
}

.logo-card img{
width:100%;
height:auto;
border-radius:18px
}


/* MOBILE BUTTONS */

.hero-actions{
gap:10px
}

.btn{
padding:13px 18px;
font-size:.92rem
}

.tagline{
margin-top:22px;
font-size:.67rem;
letter-spacing:.1em
}


/* MOBILE SECTIONS */

.page-hero{
padding:50px 0 54px
}

.page-hero h1{
font-size:clamp(2.7rem,13vw,4rem)
}

.page-hero p{
font-size:1rem
}

.section{
padding:60px 0
}

.section h2{
font-size:clamp(2.2rem,11vw,3.3rem)
}

.hero-grid,
.split,
.grid-2{
grid-template-columns:1fr
}

.cards{
grid-template-columns:1fr
}

.card{
min-height:auto
}


/* MOBILE CONTACT */

.contact-box{
flex-direction:column;
align-items:flex-start;
padding:28px
}

.contact-actions{
align-items:flex-start;
width:100%
}

.contact-actions .btn{
max-width:100%;
font-size:.82rem
}


/* MOBILE FOOTER */

.footer-wrap{
grid-template-columns:auto 1fr
}

.footer-wrap p{
grid-column:1/-1;
text-align:left
}

}