/* ==========================================================================
   Dueter - pages.css: About, Contact, Tools hub, generic pages, front page.
   Every heading and text block is centred on these pages.
   ========================================================================== */
.dt-page{color:var(--dt-text); text-align:center;}
.dt-page :where(h1,h2,h3,p){margin:0;}
.dt-page a:not(.dt-btn){color:var(--dt-violet);}

/* ---------- page hero ---------- */
.dt-hero{
	position:relative; overflow:hidden; isolation:isolate;
	padding:clamp(56px,8vw,104px) 0 clamp(52px,7vw,88px);
	background:radial-gradient(760px 380px at 12% 0%,rgba(16,185,129,.14),transparent 65%),
	           radial-gradient(640px 360px at 92% 10%,rgba(6,182,212,.14),transparent 62%),
	           linear-gradient(180deg,#fff,var(--dt-bg));
}
.dt-hero::before{
	content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
	background-image:linear-gradient(rgba(4,120,87,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(4,120,87,.07) 1px,transparent 1px);
	background-size:44px 44px;
	-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 72%); mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 72%);
}
.dt-eyebrow{
	display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px; margin-bottom:18px;
	background:rgba(4,120,87,.08); border:1px solid rgba(4,120,87,.18);
	font-family:var(--dt-ui); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dt-violet);
}
.dt-eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--dt-cyan); box-shadow:0 0 0 4px rgba(6,182,212,.2); animation:dtPulse 2.4s ease-in-out infinite;}
@keyframes dtPulse{50%{box-shadow:0 0 0 8px rgba(6,182,212,0);}}
.dt-h1{font-size:clamp(2.1rem,5vw,3.9rem); line-height:1.08; font-weight:700; letter-spacing:-.035em; max-width:18ch; margin:0 auto !important;}
.dt-grad-text{background:var(--dt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.dt-lead{font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.7; color:var(--dt-muted); max-width:62ch; margin:20px auto 0 !important;}
.dt-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px;}
.dt-crumbs{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:14px; color:var(--dt-soft); margin-bottom:18px;}
.dt-crumbs a{color:var(--dt-muted) !important; text-decoration:none;}
.dt-crumbs a:hover{color:var(--dt-violet) !important;}

/* ---------- sections ---------- */
.dt-sec{padding:clamp(64px,8vw,112px) 0;}
.dt-sec--tint{background:var(--dt-bg);}
.dt-sec--tight{padding-top:0;}
.dt-head{max-width:760px; margin:0 auto clamp(36px,5vw,56px);}
.dt-kicker{display:block; font-family:var(--dt-ui); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dt-cyan-ink); margin-bottom:12px;}
.dt-h2{font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.15; font-weight:700; letter-spacing:-.03em;}
.dt-head p{margin-top:16px !important; font-size:1.08rem; color:var(--dt-muted);}

/* cards */
.dt-cards{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.dt-card{
	position:relative; padding:34px 28px 30px; border-radius:var(--dt-radius); background:#fff;
	border:1px solid var(--dt-line); box-shadow:0 18px 40px -34px rgba(11,36,32,.5);
	transition:transform .35s var(--dt-ease), box-shadow .35s var(--dt-ease), border-color .3s ease;
}
.dt-card:hover{transform:translateY(-6px); border-color:var(--dt-violet-200); box-shadow:0 30px 60px -36px rgba(4,120,87,.55);}
.dt-card h3{font-size:1.2rem; font-weight:600; margin:18px 0 10px;}
.dt-card p{font-size:15.5px; line-height:1.65; color:var(--dt-muted);}
.dt-ico{
	display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:18px;
	color:#fff; background:var(--dt-grad); box-shadow:0 14px 26px -14px rgba(4,120,87,.8);
}

/* stagger helper for reveal */
.dt-cards > .dt-rv:nth-child(2){--d:.08s;} .dt-cards > .dt-rv:nth-child(3){--d:.16s;}
.dt-cards > .dt-rv:nth-child(4){--d:.24s;} .dt-cards > .dt-rv:nth-child(5){--d:.32s;} .dt-cards > .dt-rv:nth-child(6){--d:.4s;}

/* CTA band */
.dt-cta{
	position:relative; overflow:hidden; isolation:isolate; border-radius:28px; color:#fff;
	padding:clamp(44px,6vw,72px) clamp(22px,5vw,64px);
	background:radial-gradient(600px 300px at 10% 0%,rgba(16,185,129,.65),transparent 65%),radial-gradient(520px 300px at 95% 100%,rgba(6,182,212,.5),transparent 65%),linear-gradient(135deg,#0B2420,#0B3B30);
}
.dt-cta h2{color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.03em;}
.dt-cta p{color:#CFE3DB; max-width:56ch; margin:14px auto 0 !important;}
.dt-cta .dt-actions{margin-top:28px;}
.dt-cta-orb{position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); opacity:.5; animation:dtFloat 9s ease-in-out infinite;}
.dt-cta-orb.a{width:120px; height:120px; left:6%; bottom:-40px; background:radial-gradient(circle at 30% 30%,#67E8F9,transparent 70%);}
.dt-cta-orb.b{width:160px; height:160px; right:5%; top:-60px; background:radial-gradient(circle at 30% 30%,#6EE7B7,transparent 70%); animation-delay:-4s;}
@keyframes dtFloat{50%{transform:translateY(-18px) translateX(10px);}}

/* ---------- shared vector animation pieces ---------- */
.dt-illus{display:block; width:100%; max-width:640px; height:auto; margin:clamp(36px,5vw,56px) auto 0;}
.dt-v-left{animation:dtDuetL 6s var(--dt-ease) infinite;}
.dt-v-right{animation:dtDuetR 6s var(--dt-ease) infinite;}
@keyframes dtDuetL{0%,100%{transform:translateX(-34px);} 45%,60%{transform:translateX(0);}}
@keyframes dtDuetR{0%,100%{transform:translateX(34px);} 45%,60%{transform:translateX(0);}}
.dt-v-scan{animation:dtScan 6s ease-in-out infinite;}
@keyframes dtScan{0%,35%{transform:translateY(0); opacity:0;} 45%{opacity:1;} 62%{transform:translateY(150px); opacity:1;} 70%,100%{transform:translateY(150px); opacity:0;}}
.dt-v-ring{transform-box:fill-box; transform-origin:center; animation:dtSpin 14s linear infinite;}
.dt-v-hand{transform-box:view-box; animation:dtSpin 6s linear infinite;}
@keyframes dtSpin{to{transform:rotate(360deg);}}
.dt-v-float{animation:dtFloat 7s ease-in-out infinite;}
.dt-v-float.b{animation-delay:-2.3s;} .dt-v-float.c{animation-delay:-4.6s;}
.dt-v-blink{animation:dtBlink 3s ease-in-out infinite;}
.dt-v-blink.b{animation-delay:-1s;} .dt-v-blink.c{animation-delay:-2s;}
@keyframes dtBlink{50%{opacity:.25;}}
.dt-v-draw{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);}
.is-in .dt-v-draw,.dt-v-draw.is-in{stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--dt-ease) var(--d,0s);}
html.no-js .dt-v-draw{stroke-dashoffset:0;}
.dt-v-plane{animation:dtPlane 7s var(--dt-ease) infinite;}
@keyframes dtPlane{0%{transform:translate(-60px,40px) rotate(-8deg); opacity:0;} 12%{opacity:1;} 55%{transform:translate(170px,-26px) rotate(4deg); opacity:1;} 68%,100%{transform:translate(240px,-6px) scale(.5); opacity:0;}}
.dt-v-mail{transform-box:fill-box; transform-origin:center; animation:dtMail 7s var(--dt-ease) infinite;}
@keyframes dtMail{0%,58%{transform:scale(1);} 64%{transform:scale(1.08);} 70%,100%{transform:scale(1);}}
.dt-v-pop{transform-box:fill-box; transform-origin:center; animation:dtPop 7s var(--dt-ease) infinite;}
@keyframes dtPop{0%,62%{transform:scale(0); opacity:0;} 70%{transform:scale(1.15); opacity:1;} 76%,92%{transform:scale(1); opacity:1;} 100%{transform:scale(0); opacity:0;}}

/* ---------- about ---------- */
.dt-meaning{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.dt-meaning .dt-card{padding:40px 34px;}
.dt-meaning svg{width:180px; height:auto; display:block; margin:0 auto 6px;}
.dt-meaning h3{font-size:1.5rem;}
.dt-meaning h3 b{background:var(--dt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.dt-values .dt-card svg.dt-big{width:84px; height:84px; display:block; margin:0 auto;}
.dt-values .dt-card:hover svg.dt-big{animation:dtWiggle .6s var(--dt-ease);}
@keyframes dtWiggle{30%{transform:rotate(-6deg) scale(1.06);} 60%{transform:rotate(5deg) scale(1.06);}}

.dt-steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:dtstep;}
.dt-steps-line{position:absolute; left:12%; right:12%; top:34px; height:4px; z-index:0;}
.dt-steps-line svg{width:100%; height:4px; display:block;}
.dt-step{position:relative; z-index:1;}
.dt-step-n{
	display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:50%;
	background:#fff; border:2px solid var(--dt-violet-200); color:var(--dt-violet);
	font-family:var(--dt-ui); font-size:22px; font-weight:700; box-shadow:0 0 0 8px #fff;
	transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.dt-step.is-in .dt-step-n{background:var(--dt-grad); color:#fff; border-color:transparent; transition-delay:calc(var(--d,0s) + .4s);}
.dt-step h3{font-size:1.15rem; margin:18px 0 8px;}
.dt-step p{font-size:15.5px; color:var(--dt-muted); max-width:30ch; margin:0 auto !important;}
.dt-step:nth-child(3){--d:.15s;} .dt-step:nth-child(4){--d:.3s;} .dt-step:nth-child(5){--d:.45s;}

.dt-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.dt-fact{padding:28px 18px; border-radius:18px; background:#fff; border:1px solid var(--dt-line);}
.dt-fact b{display:block; font-family:var(--dt-ui); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; background:var(--dt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.dt-fact span{display:block; margin-top:8px; font-size:15px; color:var(--dt-muted);}

/* ---------- contact ---------- */
.dt-contact{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:28px; align-items:start; text-align:left;}
.dt-contact-info{display:grid; gap:18px;}
.dt-info{display:flex; gap:18px; align-items:flex-start; padding:24px; border-radius:18px; background:#fff; border:1px solid var(--dt-line); text-align:left; transition:transform .3s var(--dt-ease), border-color .3s ease;}
.dt-info:hover{transform:translateX(4px); border-color:var(--dt-violet-200);}
.dt-info .dt-ico{flex:0 0 52px; width:52px; height:52px; border-radius:15px;}
.dt-info h3{font-size:1.06rem; margin:2px 0 4px;}
.dt-info p{font-size:15.5px; color:var(--dt-muted);}
.dt-info a{font-weight:600; text-decoration:none;}
.dt-form-card{
	position:relative; padding:clamp(26px,3.5vw,44px); border-radius:24px; background:#fff;
	border:1px solid var(--dt-line); box-shadow:0 40px 80px -50px rgba(11,36,32,.55);
}
.dt-form-card::before{content:""; position:absolute; inset:0 0 auto; height:5px; border-radius:24px 24px 0 0; background:var(--dt-grad);}
.dt-form-card > h2{font-size:1.5rem; text-align:center;}
.dt-form-card > p{text-align:center; color:var(--dt-muted); margin:8px 0 26px !important;}

/* Contact Form 7, default markup and the dt-cf-* layout from the README */
.dt-form-card .wpcf7 form > p,.dt-form-card .wpcf7 .dt-cf-field{margin:0 0 18px;}
.dt-form-card .wpcf7 label,.dt-form-card .dt-cf-field > label{display:block; font-family:var(--dt-ui); font-size:14.5px; font-weight:600; color:var(--dt-ink); margin-bottom:7px;}
.dt-form-card .wpcf7 br{display:none;}
.dt-form-card .wpcf7-form-control-wrap{display:block; margin-top:7px;}
.dt-form-card .dt-cf-field .wpcf7-form-control-wrap{margin-top:0;}
.dt-form-card .wpcf7 input[type=text],.dt-form-card .wpcf7 input[type=email],.dt-form-card .wpcf7 input[type=tel],
.dt-form-card .wpcf7 input[type=url],.dt-form-card .wpcf7 select,.dt-form-card .wpcf7 textarea{
	width:100%; box-sizing:border-box; min-height:54px; padding:14px 16px; border-radius:14px;
	border:1.5px solid var(--dt-line); background:var(--dt-bg); color:var(--dt-ink);
	font-family:var(--dt-body); font-size:16px; line-height:1.5;
	transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dt-form-card .wpcf7 textarea{min-height:160px; resize:vertical;}
.dt-form-card .wpcf7 input:focus,.dt-form-card .wpcf7 select:focus,.dt-form-card .wpcf7 textarea:focus{outline:none; background:#fff; border-color:var(--dt-violet-2); box-shadow:0 0 0 4px rgba(16,185,129,.16);}
.dt-form-card .wpcf7 .wpcf7-not-valid{border-color:var(--dt-bad);}
.dt-form-card .wpcf7-not-valid-tip{font-size:13.5px; color:var(--dt-bad); margin-top:6px;}
.dt-form-card .wpcf7-acceptance label{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-family:var(--dt-body); font-size:14.5px; color:var(--dt-muted);}
.dt-form-card .wpcf7-submit{
	width:100%; min-height:56px; border:0; border-radius:999px; cursor:pointer; color:#fff;
	font-family:var(--dt-ui); font-size:16.5px; font-weight:600; background:var(--dt-grad); background-size:160% 100%;
	box-shadow:0 14px 30px -14px rgba(4,120,87,.7); transition:transform .2s var(--dt-ease), background-position .5s var(--dt-ease);
}
.dt-form-card .wpcf7-submit:hover{transform:translateY(-2px); background-position:100% 0;}
.dt-form-card .wpcf7-submit:disabled{opacity:.6; cursor:not-allowed;}
.dt-form-card .wpcf7-spinner{display:block; margin:10px auto 0;}
.dt-form-card .wpcf7 form .wpcf7-response-output{margin:16px 0 0; padding:14px 16px; border-radius:12px; font-size:15px; text-align:center;}
.dt-form-card .wpcf7 form.sent .wpcf7-response-output{border-color:var(--dt-ok); background:#E9F8F2; color:#0B6B4F;}
.dt-form-card .wpcf7 form.invalid .wpcf7-response-output,.dt-form-card .wpcf7 form.failed .wpcf7-response-output{border-color:var(--dt-bad); background:#FDEEF0; color:#9B2335;}
.dt-cf-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.dt-form-empty{text-align:center; padding:12px 0;}
.dt-form-empty p{color:var(--dt-muted); margin-bottom:20px !important;}

/* FAQ */
.dt-faq{max-width:820px; margin:0 auto; display:grid; gap:12px; text-align:left;}
.dt-faq details{border:1px solid var(--dt-line); border-radius:16px; background:#fff; transition:border-color .2s ease, box-shadow .3s ease;}
.dt-faq details[open]{border-color:var(--dt-violet-200); box-shadow:0 20px 40px -32px rgba(4,120,87,.6);}
.dt-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; font-family:var(--dt-ui); font-weight:600; color:var(--dt-ink); font-size:16.5px;}
.dt-faq summary::-webkit-details-marker{display:none;}
.dt-faq summary::after{content:"+"; flex:0 0 30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--dt-violet-50); color:var(--dt-violet); font-size:20px; transition:transform .3s var(--dt-ease);}
.dt-faq details[open] summary::after{transform:rotate(45deg);}
.dt-faq summary:focus-visible{outline:3px solid var(--dt-cyan); outline-offset:2px; border-radius:16px;}
.dt-faq details > div{padding:0 22px 20px; color:var(--dt-muted); line-height:1.7;}
.dt-faq details > div p + p{margin-top:10px;}

/* ---------- tools hub ---------- */
.dt-filter{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px;}
.dt-filter button{min-height:44px; padding:0 20px; border-radius:999px; cursor:pointer; border:1.5px solid var(--dt-line); background:#fff; font-family:var(--dt-ui); font-size:14.5px; font-weight:500; color:var(--dt-ink); transition:all .2s ease;}
.dt-filter button:hover{border-color:var(--dt-violet-2);}
.dt-filter button[aria-pressed=true]{background:var(--dt-grad); color:#fff; border-color:transparent;}
html.no-js .dt-filter{display:none;}
.dt-tools{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.dt-tool{display:flex; flex-direction:column; align-items:center; text-decoration:none !important; color:inherit !important;}
.dt-tool.is-hidden{display:none;}
.dt-tool-tag{position:absolute; top:16px; right:16px; padding:4px 11px; border-radius:999px; font-family:var(--dt-ui); font-size:11.5px; font-weight:600; letter-spacing:.04em; background:var(--dt-cyan-50); color:var(--dt-cyan-ink);}
.dt-tool-tag.soon{background:#EEF4F1; color:var(--dt-muted);}
.dt-tool p{flex:1;}
.dt-tool-go{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--dt-ui); font-weight:600; font-size:15px; color:var(--dt-violet);}
.dt-tool-go svg{transition:transform .3s var(--dt-ease);}
.dt-tool:hover .dt-tool-go svg{transform:translateX(5px);}
.dt-tool.soon{opacity:.78;}
.dt-tool.soon:hover{transform:none;}
.dt-tool.soon .dt-ico{background:#BED3CA; box-shadow:none;}

/* ---------- generic page (legal etc.) ---------- */
.dt-prose{max-width:860px; margin:0 auto; text-align:center; font-size:17.5px; line-height:1.8;}
.dt-prose > *:first-child{margin-top:0;}
.dt-prose h2{font-size:clamp(1.4rem,2.4vw,1.8rem); margin:2em 0 .6em;}
.dt-prose h3{font-size:1.25rem; margin:1.6em 0 .5em;}
.dt-prose p{margin:0 0 1.1em;}
.dt-prose ul,.dt-prose ol{list-style-position:inside; padding:0; margin:0 0 1.2em;}
.dt-prose li{margin-bottom:.45em;}
.dt-prose img{max-width:100%; height:auto; border-radius:16px;}
.dt-prose table{width:100%; border-collapse:collapse; margin:1.6em 0; display:block; overflow-x:auto;}
.dt-prose th,.dt-prose td{border:1px solid var(--dt-line); padding:10px 14px;}
.dt-prose th{background:var(--dt-violet-50);}
.dt-updated{display:inline-block; margin-top:16px; font-size:14px; color:var(--dt-soft);}

/* ---------- front page placeholder (dark hero under the transparent header) ---------- */
.dt-front-hero{position:relative; overflow:hidden; isolation:isolate; color:#fff; padding:calc(var(--dt-head-h) + clamp(56px,9vw,120px)) 0 clamp(70px,9vw,120px); background:radial-gradient(800px 420px at 15% 10%,rgba(16,185,129,.5),transparent 65%),radial-gradient(700px 400px at 90% 30%,rgba(6,182,212,.35),transparent 65%),linear-gradient(180deg,#06201A,#05140F);}
.dt-front-hero .dt-h1{color:#fff;}
.dt-front-hero .dt-lead{color:#C7DDD4;}
.dt-front-hero .dt-eyebrow{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#A7F3D0;}
.dt-front-hero .dt-btn--ghost{color:#fff !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);}
.dt-front-hero .dt-btn--ghost:hover{background:rgba(255,255,255,.1);}

/* ---------- responsive ---------- */
@media (max-width:1024px){
	.dt-tools{grid-template-columns:repeat(2,1fr);}
	.dt-steps{grid-template-columns:repeat(2,1fr); row-gap:40px;}
	.dt-steps-line{display:none;}
	.dt-facts{grid-template-columns:repeat(2,1fr);}
	.dt-contact{grid-template-columns:1fr;}
	.dt-contact-info{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}
@media (max-width:767px){
	.dt-meaning{grid-template-columns:1fr;}
	.dt-tools{grid-template-columns:1fr;}
	.dt-steps{grid-template-columns:1fr;}
	.dt-actions .dt-btn{width:100%; max-width:360px;}
	.dt-info{flex-direction:column; align-items:center; text-align:center;}
	.dt-info:hover{transform:none;}
	.dt-cf-grid{grid-template-columns:1fr;}
	.dt-card{padding:30px 22px 26px;}
	.dt-faq summary{padding:18px;}
	.dt-faq details > div{padding:0 18px 18px;}
}
@media (max-width:420px){ .dt-facts{grid-template-columns:1fr;} }