/* ==========================================================================
   Dueter - home.css (front page only). Everything centred.
   ========================================================================== */

/* ---------- hero ---------- */
.dt-hh{
	position:relative; isolation:isolate; overflow:hidden; color:#fff;
	min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center;
	padding:calc(var(--dt-head-h) + 48px) 0 96px; background:#03100C;
}
.dt-hh-media{position:absolute; inset:0; z-index:-2;}
.dt-hh-media img,.dt-hh-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.dt-hh-shade{
	position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:
		radial-gradient(ellipse 60% 55% at 50% 50%,rgba(3,16,12,.72),rgba(3,16,12,.25) 70%,transparent),
		linear-gradient(180deg,rgba(3,16,12,.55) 0%,transparent 28%,transparent 72%,rgba(3,16,12,.85) 100%);
}
.dt-hh-in{position:relative; max-width:1240px;}
.dt-eyebrow--dark{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#A7F3D0; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.dt-hh-title{
	color:#fff; font-size:clamp(2.4rem,6.2vw,5.2rem); line-height:1.04; font-weight:700; letter-spacing:-.045em;
	margin:0 auto !important; text-wrap:balance; text-shadow:0 10px 40px rgba(3,16,12,.5);
}
.dt-hh-title span{background:linear-gradient(110deg,#6EE7B7 10%,#67E8F9 90%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;}
.dt-hh-lead{color:#CFE3DB; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.7; max-width:60ch; margin:24px auto 0 !important;}
.dt-btn--glass{
	background:rgba(255,255,255,.1); color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
	backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.dt-btn--glass:hover{background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.dt-hh-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; list-style:none; margin:30px 0 0; padding:0;}
.dt-hh-trust li{display:inline-flex; align-items:center; gap:8px; margin:0; font-family:var(--dt-ui); font-size:14.5px; color:#C7DDD4;}
.dt-hh-trust svg{color:#67E8F9;}

/* entrance: text is visible by default (LCP); only lifts slightly when JS runs */
html.js .dt-hh-in > *{animation:dtHhIn .9s var(--dt-ease) both;}
html.js .dt-hh-in > :nth-child(2){animation-delay:.08s;}
html.js .dt-hh-in > :nth-child(3){animation-delay:.16s;}
html.js .dt-hh-in > :nth-child(4){animation-delay:.24s;}
html.js .dt-hh-in > :nth-child(5){animation-delay:.32s;}
@keyframes dtHhIn{from{transform:translateY(18px); opacity:.001;} to{transform:none; opacity:1;}}
html.js .dt-hh-title{animation-name:dtHhTitle;}
@keyframes dtHhTitle{from{transform:translateY(18px);} to{transform:none;}}

.dt-hh-cue{position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:28px; height:46px; border-radius:16px; border:2px solid rgba(255,255,255,.4);}
.dt-hh-cue span{position:absolute; left:50%; top:9px; width:4px; height:9px; margin-left:-2px; border-radius:2px; background:#fff; animation:dtCue 1.8s ease-in-out infinite;}
@keyframes dtCue{0%{transform:translateY(0); opacity:1;} 70%{transform:translateY(14px); opacity:0;} 100%{opacity:0;}}
.dt-hh-cue:focus-visible{outline:3px solid #67E8F9; outline-offset:4px;}

/* ---------- marquee ---------- */
.dt-marquee{overflow:hidden; padding:20px 0; background:#061812; border-top:1px solid rgba(255,255,255,.06);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.dt-marquee-track{display:flex; gap:14px; width:max-content; animation:dtMarq 42s linear infinite;}
.dt-marquee span{flex:0 0 auto; padding:9px 20px; border-radius:999px; font-family:var(--dt-ui); font-size:14.5px; font-weight:500; color:#A7F3D0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);}
.dt-marquee span:nth-child(3n){color:#67E8F9;}
@keyframes dtMarq{to{transform:translateX(-50%);}}

/* ---------- compare showcase ---------- */
.dt-compare{background:linear-gradient(180deg,#fff,var(--dt-bg));}
.dt-screen{
	max-width:1080px; margin:0 auto; border-radius:26px; overflow:hidden; background:#061812;
	border:1px solid rgba(11,36,32,.12);
	box-shadow:0 60px 120px -60px rgba(11,36,32,.7), 0 0 0 10px rgba(255,255,255,.7), 0 0 0 11px var(--dt-line);
}
.dt-screen-bar{display:flex; align-items:center; gap:7px; padding:13px 18px; background:#0A221B; border-bottom:1px solid rgba(255,255,255,.06);}
.dt-screen-bar i{width:11px; height:11px; border-radius:50%; background:#2A4A40;}
.dt-screen-bar i:first-child{background:#10B981;} .dt-screen-bar i:nth-child(2){background:#06B6D4;}
.dt-screen-bar span{flex:1; text-align:center; margin-right:40px; font-family:var(--dt-ui); font-size:13px; color:#7F9A90;}
.dt-screen-view{position:relative; aspect-ratio:16/9;}
.dt-screen-view img,.dt-screen-view video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.dt-points{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:44px auto 0; padding:0; list-style:none;}
.dt-points li{margin:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 20px; border-radius:20px; background:rgba(255,255,255,.75); border:1px solid var(--dt-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.dt-points .dt-ico{width:52px; height:52px; border-radius:16px; margin-bottom:8px;}
.dt-points b{font-family:var(--dt-ui); font-size:1.08rem; color:var(--dt-ink);}
.dt-points small{font-size:15px; color:var(--dt-muted);}

/* ---------- live demo ---------- */
.dt-demo{
	position:relative; max-width:860px; margin:0 auto; padding:clamp(28px,4vw,48px);
	border-radius:28px; background:#fff; border:1px solid var(--dt-line);
	box-shadow:0 50px 100px -60px rgba(4,120,87,.55);
}
.dt-demo::before{content:""; position:absolute; inset:-1px; z-index:-1; border-radius:29px; background:var(--dt-grad); opacity:.35; filter:blur(24px);}
.dt-demo-in{display:flex; flex-direction:column; align-items:center; gap:20px;}
.dt-demo-date{display:flex; flex-direction:column; align-items:center; gap:8px;}
.dt-demo-date span{font-family:var(--dt-ui); font-weight:600; font-size:14.5px; color:var(--dt-ink);}
.dt-demo-date input{min-height:54px; min-width:240px; padding:0 18px; border-radius:14px; border:1.5px solid var(--dt-line); background:var(--dt-bg); font-family:var(--dt-body); font-size:17px; color:var(--dt-ink); text-align:center;}
.dt-demo-date input:focus{outline:none; border-color:var(--dt-violet-2); box-shadow:0 0 0 4px rgba(16,185,129,.16); background:#fff;}
.dt-demo-terms{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:6px; border-radius:999px; background:var(--dt-bg); border:1px solid var(--dt-line);}
.dt-demo-terms button{min-height:44px; padding:0 18px; border:0; border-radius:999px; cursor:pointer; background:transparent; font-family:var(--dt-ui); font-size:15px; font-weight:500; color:var(--dt-ink); transition:background .25s ease, color .25s ease;}
.dt-demo-terms button:hover{background:var(--dt-violet-50);}
.dt-demo-terms button[aria-pressed=true]{background:var(--dt-grad); color:#fff; box-shadow:0 8px 18px -10px rgba(4,120,87,.8);}
.dt-demo-terms button:focus-visible{outline:3px solid var(--dt-cyan); outline-offset:2px;}
.dt-demo-out{margin:30px 0 26px; padding:26px 20px; border-radius:20px; background:linear-gradient(160deg,#0F3D30,#06201A); color:#fff;}
.dt-demo-out span{display:block; font-family:var(--dt-ui); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#67E8F9;}
.dt-demo-out output{display:block; margin:8px 0 6px; font-family:var(--dt-ui); font-weight:700; font-size:clamp(1.5rem,3.4vw,2.3rem); letter-spacing:-.03em; line-height:1.15;}
.dt-demo-out output.is-new{animation:dtResPop2 .45s var(--dt-ease);}
@keyframes dtResPop2{from{opacity:.2; transform:translateY(6px);} to{opacity:1; transform:none;}}
.dt-demo-out small{color:#A9C4BA; font-size:15px;}
.dt-demo-note{margin-top:14px !important; font-size:14px; color:var(--dt-soft);}
html.no-js .dt-demo-in,html.no-js .dt-demo-out{display:none;}

/* ---------- bento ---------- */
.dt-bento{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1180px; margin:0 auto;}
.dt-bx{
	display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; border-radius:24px;
	background:#fff; border:1px solid var(--dt-line); transition:transform .35s var(--dt-ease), box-shadow .35s var(--dt-ease);
}
.dt-bx:hover{transform:translateY(-5px); box-shadow:0 30px 60px -40px rgba(4,120,87,.6);}
.dt-bx--wide{grid-column:span 2;}
.dt-bx-art{width:220px; max-width:100%; height:auto; margin-bottom:10px;}
.dt-bx-num{font-family:var(--dt-ui); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:700; letter-spacing:-.04em; line-height:1; background:var(--dt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.dt-bx h3{font-size:1.2rem; margin:14px 0 8px !important;}
.dt-bx p{font-size:15.5px; color:var(--dt-muted); max-width:38ch;}
@media (min-width:1025px){ .dt-bento > :nth-child(4){grid-column:span 2;} }

/* ---------- closing CTA over clip 3 ---------- */
.dt-endcta{position:relative; isolation:isolate; overflow:hidden; color:#fff; padding:clamp(96px,13vw,170px) 0; background:#03100C;}
.dt-endcta-media{position:absolute; inset:0; z-index:-2;}
.dt-endcta-media img,.dt-endcta-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.dt-endcta::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(3,16,12,.75),rgba(3,16,12,.35) 75%),linear-gradient(180deg,rgba(3,16,12,.6),transparent 30%,transparent 70%,rgba(5,20,15,.95));}
.dt-endcta h2{color:#fff; font-size:clamp(2rem,5vw,3.8rem); line-height:1.08; letter-spacing:-.04em;}
.dt-endcta h2 span{background:linear-gradient(110deg,#6EE7B7,#67E8F9); -webkit-background-clip:text; background-clip:text; color:transparent;}
.dt-endcta p{color:#CFE3DB; font-size:1.15rem; max-width:52ch; margin:18px auto 0 !important;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
	.dt-bento{grid-template-columns:repeat(2,1fr);}
	.dt-points{grid-template-columns:1fr 1fr 1fr; gap:14px;}
}
@media (max-width:767px){
	.dt-hh{padding-bottom:84px;}
	.dt-hh-shade{background:radial-gradient(ellipse 90% 60% at 50% 50%,rgba(3,16,12,.75),rgba(3,16,12,.4)),linear-gradient(180deg,rgba(3,16,12,.5),transparent 30%,transparent 70%,rgba(3,16,12,.85));}
	.dt-hh-cue{display:none;}
	.dt-points{grid-template-columns:1fr;}
	.dt-screen{border-radius:18px; box-shadow:0 40px 80px -50px rgba(11,36,32,.7), 0 0 0 6px rgba(255,255,255,.7), 0 0 0 7px var(--dt-line);}
	.dt-screen-bar span{margin-right:0;}
	.dt-bento{grid-template-columns:1fr;}
	.dt-bx--wide{grid-column:auto;}
	.dt-demo-terms{border-radius:22px;}
	.dt-demo-date input{min-width:0; width:100%;}
	.dt-demo-date{width:100%;}
}
@media (prefers-reduced-motion:reduce){
	.dt-hh-video{display:none;}
	.dt-marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto;}
}