/* DET Teknoloji Premium Mockup Site v3 */
:root{--bg:#030812;--panel:rgba(8,17,31,.82);--panel2:rgba(13,27,47,.72);--line:rgba(95,178,255,.25);--line2:rgba(39,209,255,.42);--text:#f4f8ff;--muted:#9fb2d2;--blue:#1176ff;--cyan:#22dfff;--shadow:0 24px 70px rgba(0,0,0,.55);--shell:min(1320px,calc(100vw - 34px))}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 48% 16%,rgba(20,132,255,.22),transparent 28%),radial-gradient(circle at 88% 44%,rgba(34,223,255,.12),transparent 24%),linear-gradient(180deg,#020611 0%,#07111d 42%,#020611 100%);color:var(--text);min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}p{margin:0;color:var(--muted);line-height:1.65}h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.035em}button,input,textarea{font:inherit}.shell{width:var(--shell);margin-inline:auto}.main-content,.site-header,.site-footer{position:relative;z-index:2}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;color:#000;padding:10px 14px;border-radius:12px}.site-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 20%,#000,transparent 76%)}.bg-orb{position:absolute;border-radius:50%;filter:blur(18px);opacity:.75}.orb-1{width:460px;height:460px;left:-170px;top:120px;background:radial-gradient(circle,rgba(19,111,255,.42),transparent 66%);animation:drift 16s ease-in-out infinite}.orb-2{width:360px;height:360px;right:-120px;top:470px;background:radial-gradient(circle,rgba(35,224,255,.24),transparent 68%);animation:drift 18s ease-in-out infinite reverse}@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(20px,-14px,0)}}.site-header{position:sticky;top:0;z-index:50;min-height:76px;display:flex;align-items:center;background:rgba(1,6,14,.68);backdrop-filter:blur(18px);border-bottom:1px solid rgba(141,189,255,.12);transition:background .25s ease,box-shadow .25s ease}.site-header.is-scrolled{background:rgba(1,6,14,.9);box-shadow:0 10px 40px rgba(0,0,0,.36)}.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:18px}.brand,.footer-brand{display:inline-flex;align-items:center;gap:12px;min-width:238px}.brand__mark{width:58px;height:48px;display:inline-grid;place-items:center;flex:0 0 auto}.brand__mark img{width:58px;height:48px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(34,223,255,.24))}.brand__text{display:grid;gap:4px;color:#fff;font-weight:900;font-size:1.08rem;letter-spacing:.09em;white-space:nowrap}.brand__text small{color:#31a8ff;font-size:.52rem;letter-spacing:.22em;font-weight:800}.main-nav{display:flex;align-items:center;gap:6px}.main-nav a{position:relative;padding:12px 15px;border-radius:13px;color:#dcecff;font-size:.94rem;font-weight:700;transition:.22s ease}.main-nav a::after{content:"";position:absolute;left:20%;right:20%;bottom:2px;height:2px;border-radius:10px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transform:scaleX(.4);transition:.22s ease}.main-nav a:hover,.main-nav a.is-active{color:#fff;background:rgba(19,112,255,.09)}.main-nav a:hover::after,.main-nav a.is-active::after{opacity:1;transform:scaleX(1)}.main-nav .nav-cta{margin-left:8px;padding:12px 21px;background:linear-gradient(135deg,#1fb6ff,#0864ff 70%);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 22px rgba(13,116,255,.45),inset 0 1px 0 rgba(255,255,255,.18)}.main-nav .nav-cta::after{display:none}.nav-toggle{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;border-radius:14px}.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;border-radius:10px}.det-home{position:relative;overflow:hidden}.det-home::before{content:"";position:absolute;inset:70px 0 auto;height:720px;z-index:-1;background:radial-gradient(ellipse at 60% 40%,rgba(31,116,255,.16),transparent 48%),radial-gradient(ellipse at 50% 80%,rgba(35,224,255,.14),transparent 38%)}.mock-hero{padding:36px 0 20px;min-height:630px}.mock-hero__inner{display:grid;grid-template-columns:.84fr 1.16fr;align-items:center;gap:28px}.mock-hero__content{position:relative;z-index:2;padding:38px 0 10px}.mock-hero__content h1{font-size:clamp(2.65rem,4.6vw,5rem);font-weight:900;line-height:.98;margin-bottom:22px;text-shadow:0 12px 40px rgba(0,0,0,.3)}.mock-hero__content h1 span{color:var(--cyan);text-shadow:0 0 32px rgba(35,224,255,.25)}.mock-hero__content p{max-width:560px;font-size:1.08rem;color:#d9e5f8;margin-bottom:28px}.mock-actions{display:flex;gap:16px;flex-wrap:wrap}.mock-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:14px;color:#fff;font-weight:800;border:1px solid transparent;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.mock-btn:hover,.btn:hover{transform:translateY(-2px)}.mock-btn--primary,.btn-primary{background:linear-gradient(135deg,#1fc7ff 0%,#0b6fff 60%,#0550e7 100%);border-color:rgba(255,255,255,.16);box-shadow:0 16px 36px rgba(8,102,255,.38),inset 0 1px 0 rgba(255,255,255,.18)}.mock-btn--dark,.btn-secondary,.btn--ghost-dark,.btn--ghost,.btn--light{background:rgba(9,19,35,.78);border-color:rgba(137,188,255,.2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.btn--small{min-height:44px;padding-inline:18px}.mock-hero__scene{position:relative;min-height:560px;border-radius:34px}.mock-hero__scene::before{content:"";position:absolute;left:2%;right:2%;bottom:4%;height:44%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,128,255,.36),transparent 62%);filter:blur(16px)}.scene-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 50px rgba(0,0,0,.55))}.hud-card{position:absolute;border-radius:18px;padding:14px;background:linear-gradient(180deg,rgba(8,17,31,.9),rgba(6,12,22,.86));border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.38),0 0 28px rgba(18,122,255,.12);backdrop-filter:blur(12px);color:#fff}.hud-card strong{display:block;font-size:.72rem;letter-spacing:.08em;color:#cfe7ff;margin-bottom:8px}.hud-card small{color:#72ffca;font-size:.72rem;font-weight:800}.hud-plate{left:5%;top:8%;width:205px}.hud-plate span{display:block;background:#f4f8ff;color:#0b1626;border-radius:8px;padding:7px 9px;text-align:center;font-size:1.35rem;font-weight:900;letter-spacing:.12em;margin-bottom:8px}.hud-status{right:24%;top:11%;width:150px;text-align:center}.hud-status div{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:8px auto;background:radial-gradient(circle,rgba(21,116,255,.2),rgba(21,116,255,.05));border:7px solid rgba(35,224,255,.25);font-size:1.35rem;font-weight:900}.hud-live{right:10%;top:42%;width:200px}.hud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.hud-grid i{height:38px;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(35,224,255,.11));border:1px solid rgba(255,255,255,.06)}.mock-stats{padding:0 0 30px}.mock-stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.mock-stat{display:flex;align-items:center;gap:18px;min-height:116px;padding:22px 24px;background:linear-gradient(180deg,rgba(11,23,41,.76),rgba(7,14,26,.76));border:1px solid var(--line);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 32px rgba(23,122,255,.08)}.mock-stat i{width:52px;height:52px;display:grid;place-items:center;color:var(--cyan);font-size:1.55rem;border-radius:16px;background:rgba(31,148,255,.11);border:1px solid rgba(35,224,255,.2)}.mock-stat small{display:block;color:#c9dcf6;font-size:.83rem;margin-bottom:4px}.mock-stat strong{font-size:2rem;font-weight:900;color:#fff;display:block;line-height:1}.mock-stat p{font-size:.84rem;color:#aabbd5}.mock-section{padding:24px 0 20px}.mock-section--tight{padding-block:18px}.mock-section--last{padding-bottom:64px}.mock-title{text-align:center;margin-bottom:18px}.mock-title h2{font-size:clamp(1.85rem,3vw,2.65rem);font-weight:900}.mock-title span{display:block;width:76px;height:4px;margin:12px auto 0;border-radius:99px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 18px rgba(35,224,255,.6)}.solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.solution-card{position:relative;min-height:138px;display:grid;grid-template-columns:78px 1fr 20px;align-items:center;gap:16px;padding:20px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(10,24,43,.84),rgba(6,13,24,.88));border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.solution-card:hover,.why-box:hover,.mock-project:hover,.process-step:hover,.premium-item:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 24px 70px rgba(0,0,0,.36),0 0 28px rgba(35,224,255,.1)}.solution-icon{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;color:var(--cyan);font-size:1.75rem;background:rgba(24,134,255,.12);border:1px solid rgba(35,224,255,.18)}.solution-card h3{font-size:1.06rem;margin-bottom:8px}.solution-card p{font-size:.88rem;color:#b4c5df;line-height:1.5}.solution-card em{color:#d9f5ff;font-style:normal;opacity:.9}.premium-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;padding:12px;border-radius:18px;background:rgba(8,17,31,.36);border:1px solid rgba(92,174,255,.18)}.premium-item{position:relative;border-radius:14px;padding:16px 12px;display:grid;justify-items:center;gap:9px;min-height:94px;text-align:center;background:linear-gradient(180deg,rgba(10,24,43,.74),rgba(6,13,24,.68));border:1px solid rgba(95,178,255,.13)}.premium-item i{color:var(--cyan);font-size:1.32rem}.premium-item strong{font-size:.78rem;line-height:1.35}.why-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.why-box{position:relative;border-radius:18px;min-height:138px;padding:22px;background:linear-gradient(180deg,rgba(10,24,43,.75),rgba(6,13,24,.82));border:1px solid var(--line)}.why-box i{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;color:var(--cyan);background:rgba(31,148,255,.12);margin-bottom:14px}.why-box h3{font-size:1rem;margin-bottom:8px}.why-box p{font-size:.84rem;line-height:1.5}.reference-wrap{position:relative;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:14px}.reference-wrap button{height:54px;border:0;background:transparent;color:#eaf7ff;font-size:1.75rem;cursor:pointer}.reference-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.reference-logo{position:relative;height:110px;display:grid;place-items:center;padding:16px;border-radius:16px;background:#fff;box-shadow:0 0 28px rgba(255,255,255,.18),0 0 18px rgba(35,224,255,.08);border:1px solid rgba(255,255,255,.8)}.reference-logo img{max-height:72px;max-width:100%;object-fit:contain}.mock-section--projects{padding-top:30px}.mock-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mock-project{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,rgba(10,24,43,.76),rgba(6,13,24,.88));border:1px solid var(--line);box-shadow:0 20px 54px rgba(0,0,0,.28);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.mock-project img{width:100%;height:220px;object-fit:cover;border-bottom:1px solid rgba(92,174,255,.18);transition:transform .35s ease}.mock-project:hover img{transform:scale(1.035)}.mock-project div{padding:18px 20px 22px;position:relative}.mock-project h3{font-size:1.05rem;margin-bottom:8px}.mock-project p{font-size:.88rem;line-height:1.5;padding-right:34px}.mock-project a{position:absolute;right:18px;bottom:20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1fb6ff,#075fff);box-shadow:0 0 22px rgba(21,112,255,.4)}.process-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:16px;border-radius:18px;background:rgba(8,17,31,.42);border:1px solid rgba(92,174,255,.18)}.process-step{position:relative;border-radius:16px;padding:18px 16px;background:linear-gradient(180deg,rgba(10,24,43,.66),rgba(6,13,24,.76));border:1px solid rgba(95,178,255,.14);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.process-step i{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--cyan);background:rgba(38,133,255,.14);border:1px solid rgba(35,224,255,.22);margin-bottom:10px}.process-step small{color:#7da7d9;font-weight:900;letter-spacing:.14em}.process-step h3{font-size:.96rem;margin:4px 0 7px}.process-step p{font-size:.78rem;line-height:1.45}.mock-bottom-cta{padding:26px 0 36px}.mock-bottom-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 36px;border-radius:20px;background:radial-gradient(circle at 78% 50%,rgba(30,129,255,.26),transparent 25%),linear-gradient(135deg,rgba(11,42,84,.78),rgba(5,13,27,.88));border:1px solid var(--line2);box-shadow:0 18px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}.mock-bottom-card h2{font-size:clamp(1.8rem,3vw,2.35rem);margin-bottom:10px}.glass-card,.sidebar,.form-card,.contact-panel,.skills-panel,.service-wide-card,.detail-copy,.detail-media,.listing-card,.product-card,.project-card,.service-card{background:linear-gradient(180deg,rgba(10,24,43,.82),rgba(6,13,24,.9));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.section-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:99px;background:rgba(31,148,255,.1);border:1px solid rgba(35,224,255,.2);color:#d9efff;font-weight:800;font-size:.88rem}.page-hero{padding:44px 0 22px}.page-hero .shell{padding:34px;border-radius:24px;background:linear-gradient(180deg,rgba(10,24,43,.82),rgba(6,13,24,.9));border:1px solid var(--line);box-shadow:var(--shadow)}.page-hero h1{font-size:clamp(2.2rem,4vw,3.6rem);margin:10px 0 12px}.kicker{display:inline-flex;color:var(--cyan);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}.section{padding:34px 0 62px}.section-head{text-align:center;margin-bottom:28px}.section-head h2{font-size:clamp(1.9rem,3vw,2.8rem);margin:10px 0}.section-head--split{display:flex;justify-content:space-between;align-items:end;text-align:left;gap:20px}.content-with-sidebar{display:grid;grid-template-columns:290px 1fr;gap:24px}.sidebar{border-radius:20px;padding:22px;height:fit-content;position:sticky;top:96px}.sidebar h2,.listing-head h2,.form-card h2,.contact-panel h2{margin-bottom:16px}.category-link{display:block;padding:12px 14px;border-radius:14px;margin-bottom:10px;color:#dbeeff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-weight:700}.category-link:hover,.category-link.active{background:rgba(31,148,255,.13);border-color:var(--line2)}.listing-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.card-grid,.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.listing-card,.product-card,.project-card{border-radius:20px;overflow:hidden}.listing-card__media img,.product-card__image img,.project-card__image img{width:100%;height:235px;object-fit:cover}.listing-card__body,.product-card__body,.project-card__body{padding:20px}.listing-card h3,.product-card h3,.project-card h3{font-size:1.1rem;margin-bottom:9px}.listing-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.pill{display:inline-flex;padding:8px 12px;border-radius:99px;background:rgba(31,148,255,.1);color:#d8edff;border:1px solid rgba(35,224,255,.18);font-size:.78rem;font-weight:800;margin-bottom:12px}.muted{color:var(--muted)}.stars{color:#ffd56d}.text-link{display:inline-flex;align-items:center;gap:8px;color:#6fc9ff;font-weight:800;margin-top:12px}.service-list{display:grid;gap:20px}.service-wide-card{display:grid;grid-template-columns:280px 1fr;gap:22px;border-radius:22px;padding:18px}.service-wide-card img{width:100%;height:230px;object-fit:cover;border-radius:16px}.service-wide-card__icon,.service-detail-icon,.service-card__icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;background:rgba(31,148,255,.12);margin-bottom:14px}.form-layout{display:grid;grid-template-columns:360px 1fr;gap:24px}.form-layout--single{grid-template-columns:1fr}.form-card,.contact-panel,.skills-panel,.detail-copy,.detail-media{padding:26px;border-radius:22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-card label{display:block;margin:14px 0 8px;color:#e4f1ff;font-weight:700}.form-card input,.form-card textarea{width:100%;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.1);outline:none}.form-card input:focus,.form-card textarea:focus{border-color:var(--line2);box-shadow:0 0 0 4px rgba(35,224,255,.08)}.alert-success{padding:12px 14px;border-radius:14px;background:rgba(31,220,142,.12);border:1px solid rgba(31,220,142,.24);color:#96ffd2;margin-bottom:16px}.validation-summary,.field-validation{color:#ffb1b1;font-size:.92rem}.about-split,.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.counter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.counter-grid div,.meta-grid div{padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.counter-grid strong,.meta-grid strong{display:block;color:#fff;font-size:1.3rem}.skill-row+.skill-row{margin-top:18px}.skill-row>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.skillbar{height:12px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.skillbar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--blue))}.detail-main-img{width:100%;max-height:520px;object-fit:cover;border-radius:18px}.gallery-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-top:14px}.gallery-strip img{width:100%;height:90px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}.rich-text{display:grid;gap:12px;margin-top:16px;color:var(--muted)}.rich-text ul{color:var(--muted);padding-left:18px}.site-cta{padding:20px 0 42px}.site-cta__inner{display:flex;align-items:center;gap:24px;padding:28px;border-radius:24px}.site-cta__icon{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;background:rgba(31,148,255,.16);color:var(--cyan);font-size:1.7rem}.site-cta__content{flex:1}.site-cta h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:10px 0}.site-footer{background:rgba(1,6,14,.48);border-top:1px solid rgba(141,189,255,.1)}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:26px;padding:32px 0}.footer-brand{margin-bottom:14px}.site-footer h3{font-size:1rem;margin-bottom:15px}.footer-list{list-style:none;padding:0;display:grid;gap:11px;color:var(--muted)}.footer-list li{display:flex;align-items:flex-start;gap:10px}.footer-list a:hover{color:#fff}.social-links{display:flex;gap:12px;flex-wrap:wrap}.social-links a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0 28px}.footer-bottom__inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#98abc9}.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .62s ease,transform .62s ease}.reveal-up.in-view{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}.floating-card{will-change:transform}@media(max-width:1180px){.main-nav a{padding-inline:10px;font-size:.88rem}.mock-hero__inner,.content-with-sidebar,.form-layout,.about-split,.detail-grid,.footer-grid{grid-template-columns:1fr}.mock-hero__scene{min-height:520px}.mock-stats__grid,.why-row{grid-template-columns:repeat(2,1fr)}.solution-grid,.mock-projects,.card-grid,.project-grid{grid-template-columns:repeat(2,1fr)}.premium-strip{grid-template-columns:repeat(4,1fr)}.reference-grid{grid-template-columns:repeat(4,1fr)}.process-row{grid-template-columns:repeat(3,1fr)}.sidebar{position:static}}@media(max-width:920px){.nav-toggle{display:block}.main-nav{display:none;position:absolute;left:17px;right:17px;top:78px;flex-direction:column;align-items:stretch;padding:14px;border-radius:22px;background:rgba(3,8,18,.96);border:1px solid var(--line);box-shadow:var(--shadow)}.main-nav.is-open{display:flex}.main-nav a{text-align:center}.main-nav .nav-cta{margin-left:0}.mock-hero__content{padding-top:14px}.mock-hero__content h1{font-size:clamp(2.2rem,8vw,3.4rem)}.mock-hero__scene{min-height:440px}.hud-plate{left:0;top:2%;transform:scale(.88);transform-origin:left top}.hud-status{right:12%;top:8%;transform:scale(.86);transform-origin:right top}.hud-live{right:0;top:42%;transform:scale(.86);transform-origin:right top}.reference-wrap{grid-template-columns:1fr}.reference-wrap button{display:none}.mock-bottom-card,.site-cta__inner,.section-head--split{flex-direction:column;align-items:flex-start;display:flex}.service-wide-card{grid-template-columns:1fr}}@media(max-width:720px){.shell{width:min(100vw - 24px,1320px)}.brand{min-width:0}.brand__mark,.brand__mark img{width:48px;height:42px}.brand__text{font-size:.88rem;letter-spacing:.06em}.brand__text small{font-size:.45rem}.mock-hero{min-height:auto;padding-top:24px}.mock-actions{flex-direction:column}.mock-btn{width:100%}.mock-hero__scene{min-height:360px;margin-top:10px}.hud-card{display:none}.mock-stats__grid,.solution-grid,.premium-strip,.why-row,.reference-grid,.mock-projects,.process-row,.card-grid,.project-grid,.form-grid,.counter-grid,.meta-grid{grid-template-columns:1fr}.solution-card{grid-template-columns:62px 1fr}.solution-card em{display:none}.reference-logo{height:96px}.footer-bottom__inner{flex-direction:column}}


/* Realistic premium image implementation */
.mock-hero__scene--realistic {
    min-height: 560px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(92, 174, 255, .28);
    background: #07101d;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .52), 0 0 70px rgba(20, 136, 255, .14);
}
.mock-hero__scene--realistic::before {
    inset: 0;
    height: auto;
    background:
        linear-gradient(90deg, rgba(3, 8, 18, .28), transparent 32%, rgba(3, 8, 18, .18)),
        radial-gradient(circle at 62% 45%, rgba(25, 172, 255, .12), transparent 46%);
    z-index: 2;
    pointer-events: none;
}
.mock-hero__scene--realistic::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -90px 120px rgba(2,7,16,.42);
}
.hero-photo-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.05);
}
.hero-photo-glow {
    position: absolute;
    inset: auto 10% -18% 10%;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 181, 255, .28), rgba(30, 181, 255, 0) 68%);
    filter: blur(18px);
    z-index: 4;
}
.hero-live-badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    color: #eaf8ff;
    background: rgba(4, 11, 22, .74);
    border: 1px solid rgba(83, 190, 255, .32);
    box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 26px rgba(35,224,255,.12);
    backdrop-filter: blur(12px);
    font-weight: 800;
    font-size: .9rem;
}
.hero-live-badge i { color: #4bffbc; }

.mock-project img {
    height: 248px;
    filter: saturate(1.04) contrast(1.03);
}
.mock-project::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 35%, rgba(3,8,18,.3));
    opacity: .75;
}
.mock-project div { z-index: 2; }
.mock-project a { z-index: 3; }

.mock-bottom-card {
    background:
        linear-gradient(90deg, rgba(5,13,27,.92), rgba(5,13,27,.74)),
        url('/images/premium/project-realistic-control-room.png') center / cover;
}
.page-hero .shell {
    background:
        linear-gradient(90deg, rgba(5,13,27,.94), rgba(5,13,27,.82)),
        url('/images/premium/project-realistic-parking.png') center / cover,
        linear-gradient(180deg, rgba(10,24,43,.82), rgba(6,13,24,.9));
}

@media(max-width: 980px) {
    .mock-hero__scene--realistic {
        min-height: 420px;
        aspect-ratio: 16 / 11;
    }
    .hero-photo { object-position: center; }
}
@media(max-width: 720px) {
    .mock-hero__scene--realistic {
        min-height: 330px;
        aspect-ratio: 16 / 12;
        border-radius: 24px;
    }
    .hero-live-badge {
        right: 12px;
        bottom: 12px;
        font-size: .78rem;
        padding: 10px 12px;
    }
    .mock-project img { height: 230px; }
}

/* v5 reference logo correction: clean, unsplit logo wall */
.reference-wrap{
    align-items:center!important;
}
.reference-grid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:16px!important;
}
.reference-logo{
    height:126px!important;
    min-height:126px!important;
    padding:20px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important;
    border:1px solid rgba(190,222,255,.95)!important;
    border-radius:18px!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.86) inset,0 0 26px rgba(33,172,255,.18),0 16px 28px rgba(0,0,0,.18)!important;
    overflow:hidden!important;
    font-size:0!important;
}
.reference-logo img{
    width:auto!important;
    height:auto!important;
    max-width:92%!important;
    max-height:86px!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:none!important;
    transform:none!important;
}
.reference-logo span,
.reference-logo small,
.reference-logo p,
.reference-logo strong{
    display:none!important;
}
@media(max-width:1180px){
    .reference-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media(max-width:720px){
    .reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .reference-logo{height:112px!important;min-height:112px!important;}
    .reference-logo img{max-height:76px!important;}
}

/* Premium services page */
.services-hero .shell{padding:38px 34px}
.services-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.services-hero h1 span{color:var(--cyan)}
.services-hero__lead{max-width:720px;font-size:1.05rem;color:#d6e5fb;margin-bottom:24px}
.services-hero__stats{display:grid;gap:16px}
.services-stat-card{padding:22px;border-radius:22px;background:linear-gradient(180deg,rgba(11,23,41,.82),rgba(7,14,26,.9));border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05)}
.services-stat-card strong{display:block;font-size:1.6rem;color:#fff;margin-bottom:8px}
.services-stat-card span{display:block;color:#8ddcff;font-weight:800;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.services-page-section{padding-top:10px}
.service-premium-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.service-premium-card{overflow:hidden;border-radius:24px;background:linear-gradient(180deg,rgba(10,24,43,.84),rgba(6,13,24,.92));border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.service-premium-card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 28px 80px rgba(0,0,0,.36),0 0 36px rgba(35,224,255,.10)}
.service-premium-card__media{display:block;position:relative;overflow:hidden}
.service-premium-card__media::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(3,8,18,.5) 45%,rgba(3,8,18,.95))}
.service-premium-card__media img{width:100%;height:310px;object-fit:cover;transition:transform .45s ease}
.service-premium-card:hover .service-premium-card__media img{transform:scale(1.04)}
.service-premium-card__body{padding:24px}
.service-premium-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.service-premium-card__icon{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(31,148,255,.14);border:1px solid rgba(35,224,255,.18);font-size:1.4rem}
.service-premium-card h2{font-size:1.45rem;margin-bottom:10px}
.service-premium-card p{font-size:.98rem;color:#bdd1ee}
.service-chip-list{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px}
.service-chip-list span,.service-detail-chipbox span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:rgba(31,148,255,.11);border:1px solid rgba(35,224,255,.16);color:#e4f2ff;font-size:.82rem;font-weight:700}
.service-premium-card__footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.services-process-section{padding-top:8px}
.service-process-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.services-cta-card{border-color:rgba(35,224,255,.24)}
.service-detail-hero__shell{display:grid;gap:18px}
.service-detail-hero__content{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.service-detail-chipbox{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.service-detail-grid{align-items:start}
.service-detail-media{display:grid;gap:16px}
.service-media-note{padding:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.service-media-note strong{display:block;font-size:1rem;color:#fff;margin-bottom:8px}
.service-detail-copy h2{font-size:1.7rem;margin-bottom:8px}
.service-feature-panel{margin-top:22px;padding:20px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.service-feature-panel h3{font-size:1.08rem;margin-bottom:12px}
.service-feature-panel ul{margin:0;padding-left:20px;color:#dbe8fa;display:grid;gap:8px}

/* Project gallery and image hover effects */
.listing-card__media,.product-card__image,.project-card__image{position:relative;overflow:hidden}
.listing-card__media img,.product-card__image img,.project-card__image img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.listing-card:hover .listing-card__media img,.product-card:hover .product-card__image img,.project-card:hover .project-card__image img{transform:scale(1.08);filter:saturate(1.08) contrast(1.03)}
.project-gallery{overflow:hidden}
.detail-main-figure{margin:0}
.image-zoom-frame{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.image-zoom-frame .detail-main-img{transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .2s ease,filter .35s ease;display:block}
.image-zoom-frame:hover .detail-main-img{transform:scale(1.06);filter:saturate(1.07) contrast(1.03)}
.detail-main-img.is-switching{opacity:.38;transform:scale(1.02)}
.project-gallery__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px;color:#eaf5ff}
.project-gallery__head strong{font-size:1rem}
.project-gallery__head span{font-size:.88rem;color:var(--muted);font-weight:700}
.gallery-strip--interactive{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:8px 2px 14px;margin-top:0;scrollbar-width:thin;scrollbar-color:rgba(35,224,255,.45) rgba(255,255,255,.06)}
.gallery-strip--interactive::-webkit-scrollbar{height:8px}
.gallery-strip--interactive::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:99px}
.gallery-strip--interactive::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:99px}
.gallery-thumb{appearance:none;-webkit-appearance:none;flex:0 0 132px;height:94px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:0;border-radius:14px;cursor:pointer;overflow:hidden;scroll-snap-align:start;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .38s ease,filter .35s ease}
.gallery-thumb:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 18px rgba(35,224,255,.12)}
.gallery-thumb:hover img{transform:scale(1.1);filter:saturate(1.08) contrast(1.03)}
.gallery-thumb.is-active{border-color:var(--line2);box-shadow:0 0 0 2px rgba(35,224,255,.16),0 18px 38px rgba(0,0,0,.24)}
.gallery-thumb:focus-visible{outline:none;border-color:var(--line2);box-shadow:0 0 0 3px rgba(35,224,255,.24)}
@media(max-width:1180px){.services-hero__grid,.service-detail-hero__content,.service-process-row{grid-template-columns:1fr}.service-detail-chipbox{justify-content:flex-start}.service-premium-grid{grid-template-columns:1fr}}
@media(max-width:720px){.service-premium-card__media img{height:240px}.services-hero .shell{padding:28px 20px}.service-premium-card__body{padding:20px}.service-premium-card h2{font-size:1.2rem}.gallery-thumb{flex-basis:108px;height:78px}}

/* Premium home animations v10 */
.scroll-progress-bar{position:fixed;left:0;top:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,#22dfff,#1176ff,#22dfff);box-shadow:0 0 18px rgba(35,224,255,.65);transform-origin:left center;pointer-events:none}
.mock-hero__content h1 span{background:linear-gradient(90deg,#22dfff,#ffffff,#1176ff,#22dfff);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:detTextShine 5.8s linear infinite;text-shadow:none}
.mock-btn--primary,.nav-cta{position:relative;overflow:hidden}.mock-btn--primary::before,.nav-cta::before{content:"";position:absolute;inset:-120% auto -120% -45%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:rotate(18deg);animation:detButtonSweep 4.2s ease-in-out infinite}.mock-btn--primary>*{position:relative;z-index:1}
.home-hero-animated{isolation:isolate;overflow:visible}.home-hero-animated::after{content:"";position:absolute;inset:12% 3% 4%;z-index:-1;border-radius:34px;background:radial-gradient(circle at var(--mx,60%) var(--my,40%),rgba(35,224,255,.18),transparent 34%);filter:blur(12px);transition:background .18s ease}.hero-photo-wrap{position:relative;overflow:hidden;border-radius:34px;animation:detHeroFloat 7s ease-in-out infinite}.hero-photo-wrap::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(110deg,transparent 0%,rgba(35,224,255,.12) 38%,rgba(255,255,255,.2) 50%,rgba(35,224,255,.1) 62%,transparent 100%);transform:translateX(-120%);animation:detImageSweep 6.4s ease-in-out infinite;pointer-events:none}.hero-photo-wrap::after,.premium-spotlight::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 34%);opacity:0;transition:opacity .25s ease;pointer-events:none}.hero-photo-wrap:hover::after,.premium-spotlight:hover::after{opacity:1}.hero-photo{animation:detHeroBreath 10s ease-in-out infinite;will-change:transform,filter}.hero-scanline{position:absolute;left:8%;right:8%;top:0;height:2px;z-index:5;border-radius:999px;background:linear-gradient(90deg,transparent,#22dfff,#1176ff,#22dfff,transparent);box-shadow:0 0 24px rgba(35,224,255,.85);animation:detHeroScan 4.8s cubic-bezier(.4,0,.2,1) infinite;opacity:.9}.hero-orbit{position:absolute;inset:8% 2% 0 10%;z-index:-1;border:1px solid rgba(35,224,255,.13);border-radius:50%;filter:drop-shadow(0 0 18px rgba(35,224,255,.16));animation:detOrbit 18s linear infinite}.hero-orbit--two{inset:18% 10% 8% 4%;border-color:rgba(17,118,255,.12);animation-duration:24s;animation-direction:reverse}.hero-mini-widget{position:absolute;z-index:8;min-width:152px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(6,16,31,.84),rgba(5,10,19,.88));border:1px solid rgba(35,224,255,.22);box-shadow:0 22px 48px rgba(0,0,0,.35),0 0 28px rgba(35,224,255,.12);backdrop-filter:blur(12px);display:grid;gap:5px;animation:detWidgetPulse 4.6s ease-in-out infinite}.hero-mini-widget i{color:#22dfff;font-size:1.12rem}.hero-mini-widget strong{color:#fff;font-size:1.05rem}.hero-mini-widget span{color:#a9c4e6;font-size:.78rem;font-weight:800}.hero-mini-widget--one{right:5%;bottom:16%;animation-delay:.4s}.hero-mini-widget--two{left:8%;bottom:10%;animation-delay:1.2s}.hero-live-badge{animation:detBadgePulse 3.8s ease-in-out infinite}.mock-stat,.solution-card,.premium-item,.why-box,.reference-logo,.mock-project,.process-step,.service-premium-card,.listing-card{position:relative;overflow:hidden}.mock-stat::before,.solution-card::before,.premium-item::before,.why-box::before,.reference-logo::before,.mock-project::before,.process-step::before,.service-premium-card::before,.listing-card::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(35,224,255,.16),transparent 34%);opacity:0;transition:opacity .25s ease;pointer-events:none}.mock-stat:hover::before,.solution-card:hover::before,.premium-item:hover::before,.why-box:hover::before,.reference-logo:hover::before,.mock-project:hover::before,.process-step:hover::before,.service-premium-card:hover::before,.listing-card:hover::before{opacity:1}.mock-stat>*,.solution-card>*,.premium-item>*,.why-box>*,.reference-logo>*,.mock-project>*,.process-step>*,.service-premium-card>*,.listing-card>*{position:relative;z-index:1}.mock-stat i,.solution-icon,.premium-item i,.why-box i,.process-step i{animation:detIconGlow 4.4s ease-in-out infinite}.premium-item:nth-child(2) i,.solution-card:nth-child(2) .solution-icon,.why-box:nth-child(2) i{animation-delay:.3s}.premium-item:nth-child(3) i,.solution-card:nth-child(3) .solution-icon,.why-box:nth-child(3) i{animation-delay:.6s}.premium-item:nth-child(4) i,.solution-card:nth-child(4) .solution-icon,.why-box:nth-child(4) i{animation-delay:.9s}.reference-logo{animation:detLogoFloat 6.5s ease-in-out infinite}.reference-logo:nth-child(2n){animation-delay:.45s}.reference-logo:nth-child(3n){animation-delay:.9s}.mock-project img{transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .35s ease}.mock-project:hover img{transform:scale(1.08);filter:saturate(1.08) contrast(1.04)}.mock-bottom-card{position:relative;overflow:hidden}.mock-bottom-card::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(35,224,255,.09) 45%,rgba(255,255,255,.14) 50%,rgba(35,224,255,.08) 55%,transparent 100%);transform:translateX(-120%);animation:detImageSweep 7.5s ease-in-out infinite;pointer-events:none}.process-step{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.process-step:hover{transform:translateY(-6px) scale(1.015)}
@keyframes detTextShine{0%{background-position:0% center}100%{background-position:240% center}}
@keyframes detButtonSweep{0%,55%{left:-45%;opacity:0}62%{opacity:1}82%{left:120%;opacity:0}100%{left:120%;opacity:0}}
@keyframes detHeroFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes detHeroBreath{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.018);filter:saturate(1.08)}}
@keyframes detImageSweep{0%,58%{transform:translateX(-120%)}78%{transform:translateX(120%)}100%{transform:translateX(120%)}}
@keyframes detHeroScan{0%{top:8%;opacity:0}12%{opacity:.9}72%{opacity:.9}100%{top:86%;opacity:0}}
@keyframes detOrbit{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.03)}100%{transform:rotate(360deg) scale(1)}}
@keyframes detWidgetPulse{0%,100%{transform:translateY(0);box-shadow:0 22px 48px rgba(0,0,0,.35),0 0 22px rgba(35,224,255,.10)}50%{transform:translateY(-8px);box-shadow:0 30px 65px rgba(0,0,0,.45),0 0 42px rgba(35,224,255,.18)}}
@keyframes detBadgePulse{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 18px rgba(35,224,255,.16)}50%{box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 34px rgba(35,224,255,.32)}}
@keyframes detIconGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(35,224,255,0))}50%{filter:drop-shadow(0 0 14px rgba(35,224,255,.42))}}
@keyframes detLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:920px){.hero-mini-widget{display:none}.hero-scanline{left:4%;right:4%}.hero-orbit{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.scroll-progress-bar{display:none}}

.seo-focus-section{padding-top:18px}.seo-focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.seo-focus-card{padding:22px;border-radius:18px;background:linear-gradient(180deg,rgba(10,24,43,.78),rgba(6,13,24,.88));border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.seo-focus-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 28px rgba(35,224,255,.10)}.seo-focus-card h3{font-size:1.08rem;margin-bottom:9px}.seo-focus-card p{font-size:.92rem;color:#b8c9e3}@media(max-width:1180px){.seo-focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.seo-focus-grid{grid-template-columns:1fr}}

/* Interactive DET Vision mini demo */
.det-game-section {
    position: relative;
    padding-top: 30px;
    padding-bottom: 38px;
}
.det-game-section::before {
    content: "";
    position: absolute;
    inset: 5% 0 auto;
    height: 420px;
    pointer-events: none;
    background: radial-gradient(ellipse at 70% 45%, rgba(35, 224, 255, .15), transparent 42%), radial-gradient(ellipse at 30% 55%, rgba(17, 118, 255, .12), transparent 36%);
    z-index: -1;
}
.det-game-shell {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 28px;
    align-items: center;
}
.det-game-copy h2 {
    font-size: clamp(2.05rem, 3.6vw, 3.8rem);
    font-weight: 900;
    margin: 10px 0 18px;
}
.det-game-copy p {
    font-size: 1.02rem;
    max-width: 560px;
}
.det-game-copy p strong {
    color: #fff;
    text-shadow: 0 0 18px rgba(35,224,255,.25);
}
.det-game-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.det-game-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(31,148,255,.11);
    border: 1px solid rgba(35,224,255,.18);
    color: #dff3ff;
    font-size: .86rem;
    font-weight: 800;
}
.det-game-badges i {
    color: var(--cyan);
}
.det-game-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(10,24,43,.88), rgba(3,8,18,.96));
    border: 1px solid rgba(35,224,255,.22);
    box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 38px rgba(35,224,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.det-game-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 15%, rgba(35,224,255,.18) 45%, transparent 70%);
    opacity: .35;
    transform: translateX(-60%);
    animation: detGameCardSweep 7s ease-in-out infinite;
}
@keyframes detGameCardSweep {
    0%, 46% { transform: translateX(-65%); opacity: .04; }
    58% { opacity: .42; }
    100% { transform: translateX(65%); opacity: .04; }
}
.det-game-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 2px 2px 14px;
}
.det-game-topbar small {
    display: block;
    color: #7ea7d9;
    font-weight: 900;
    letter-spacing: .14em;
    font-size: .72rem;
    margin-bottom: 4px;
}
.det-game-topbar strong {
    color: #fff;
    font-size: 1.05rem;
}
.det-game-plate {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fbff, #b6cbe8);
    color: #06111e;
    font-weight: 950;
    letter-spacing: .12em;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 0 22px rgba(35,224,255,.20);
}
#detVisionGame {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 980 / 520;
    display: block;
    border-radius: 22px;
    background: #030812;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 70px rgba(17,118,255,.12), 0 16px 42px rgba(0,0,0,.35);
}
.det-game-controls {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
}
.det-game-control,
.det-game-start {
    border: 1px solid rgba(35,224,255,.22);
    color: #fff;
    background: linear-gradient(180deg, rgba(13,27,47,.82), rgba(7,14,26,.94));
    border-radius: 16px;
    min-height: 52px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.26);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.det-game-start {
    background: linear-gradient(135deg, #1fc7ff 0%, #0b6fff 62%, #054bd7 100%);
    box-shadow: 0 18px 40px rgba(8,102,255,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.det-game-control:hover,
.det-game-start:hover {
    transform: translateY(-2px);
    border-color: rgba(35,224,255,.48);
    box-shadow: 0 20px 44px rgba(0,0,0,.35), 0 0 24px rgba(35,224,255,.12);
}
.det-game-control:active,
.det-game-start:active {
    transform: translateY(0) scale(.98);
}
.det-game-hint {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: .86rem;
    color: #8ea5c7;
    margin-top: 10px;
}
@media(max-width:1180px){
    .det-game-shell{grid-template-columns:1fr;}
    .det-game-copy{text-align:center;}
    .det-game-copy p{margin-inline:auto;}
    .det-game-badges{justify-content:center;}
}
@media(max-width:720px){
    .det-game-card{padding:12px;border-radius:22px;}
    .det-game-topbar{align-items:flex-start;}
    .det-game-plate{font-size:.86rem;min-height:38px;padding-inline:10px;}
    .det-game-controls{grid-template-columns:54px 1fr 54px;gap:8px;}
    .det-game-control,.det-game-start{min-height:48px;border-radius:14px;font-size:.9rem;}
    .det-game-badges span{font-size:.78rem;}
}

/* Premium playable DET Vision demo panel v2 */
.det-game-section--pro {
    padding-top: 44px;
    padding-bottom: 48px;
}
.det-demo-panel {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: clamp(18px, 2.6vw, 34px);
    background:
        radial-gradient(circle at 82% 20%, rgba(35,224,255,.12), transparent 26%),
        radial-gradient(circle at 12% 70%, rgba(17,118,255,.16), transparent 30%),
        linear-gradient(180deg, rgba(8, 20, 38, .92), rgba(3, 8, 18, .96));
    border: 1px solid rgba(35,224,255,.24);
    box-shadow: 0 30px 90px rgba(0,0,0,.48), 0 0 60px rgba(17,118,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.det-demo-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .16;
    pointer-events: none;
}
.det-demo-panel::after {
    content: "";
    position: absolute;
    left: -30%;
    top: -40%;
    width: 35%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(35,224,255,.12), transparent);
    transform: rotate(18deg);
    animation: detPanelSweep 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes detPanelSweep {
    0%, 42% { transform: translateX(0) rotate(18deg); opacity: 0; }
    55% { opacity: .9; }
    100% { transform: translateX(420%) rotate(18deg); opacity: 0; }
}
.det-demo-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}
.det-demo-status-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #22dfff;
    background: rgba(31,148,255,.12);
    border: 1px solid rgba(35,224,255,.28);
    box-shadow: 0 0 28px rgba(35,224,255,.14), inset 0 0 20px rgba(35,224,255,.08);
}
.det-demo-title small {
    display: block;
    color: #55a9ff;
    font-weight: 950;
    letter-spacing: .2em;
    font-size: .78rem;
    margin-bottom: 6px;
}
.det-demo-title .kicker {
    margin-bottom: 10px;
}
.det-demo-title h2 {
    font-size: clamp(2.1rem, 4.3vw, 4rem);
    font-weight: 950;
    letter-spacing: -.055em;
    margin-bottom: 8px;
}
.det-demo-title p {
    max-width: 760px;
    color: #b9cbe8;
}
.det-demo-title p strong {
    color: #fff;
    text-shadow: 0 0 18px rgba(35,224,255,.32);
}
.det-demo-plate {
    min-width: 260px;
    min-height: 72px;
    display: grid;
    grid-template-columns: 54px 1fr;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff, #d6e4f8);
    border: 2px solid rgba(255,255,255,.74);
    box-shadow: 0 0 30px rgba(35,224,255,.22), inset 0 0 0 2px rgba(3, 8, 18, .18);
}
.det-demo-plate span {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #0c67ff, #0a3dae);
    color: #fff;
    font-weight: 900;
    font-size: .95rem;
}
.det-demo-plate strong {
    display: grid;
    place-items: center;
    color: #07101e;
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    font-weight: 950;
    letter-spacing: .08em;
}
.det-demo-stage {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 28px;
    min-height: 520px;
    background: #030812;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 80px rgba(17,118,255,.14), 0 22px 58px rgba(0,0,0,.32);
}
.det-demo-stage #detVisionGame {
    width: 100%;
    height: auto;
    aspect-ratio: 1120 / 560;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #030812;
}
.det-demo-progress-card,
.det-demo-recognition,
.det-demo-result {
    position: absolute;
    z-index: 4;
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(5, 15, 30, .84), rgba(3, 9, 18, .80));
    border: 1px solid rgba(35,224,255,.22);
    box-shadow: 0 18px 50px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
.det-demo-progress-card {
    left: 24px;
    top: 24px;
    width: min(250px, 32%);
    min-height: 90px;
    border-radius: 18px;
    padding: 22px;
}
.det-demo-progress-card strong {
    display: block;
    font-size: .86rem;
    color: #dcecff;
    letter-spacing: .03em;
    margin-bottom: 14px;
}
.det-demo-progress-line {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    margin-right: 54px;
}
.det-demo-progress-line span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22dfff, #1176ff 70%, #47ffa4);
    box-shadow: 0 0 18px rgba(35,224,255,.45);
    transition: width .18s linear;
}
.det-demo-progress-card em {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #55a9ff;
    font-style: normal;
    font-weight: 900;
}
.det-demo-recognition {
    left: 50%;
    top: 58px;
    width: min(330px, 38%);
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 18px 18px 18px 62px;
    border-color: rgba(71,255,164,.24);
    opacity: .92;
}
.det-demo-recognition-check {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #47ffa4;
    background: rgba(71,255,164,.08);
    border: 1px solid rgba(71,255,164,.32);
}
.det-demo-recognition strong {
    display: block;
    color: #47ffa4;
    font-size: 1.02rem;
    margin-bottom: 8px;
}
.det-demo-recognition p {
    font-size: .86rem;
    color: #b8c9e3;
    margin-bottom: 12px;
}
.det-demo-recognition-plate {
    display: inline-flex;
    justify-content: center;
    min-width: 180px;
    border-radius: 11px;
    padding: 9px 14px;
    background: linear-gradient(180deg, #f9fbff, #d1e1f6);
    color: #06111e;
    font-weight: 950;
    letter-spacing: .08em;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 0 18px rgba(35,224,255,.16);
}
.det-demo-result {
    left: 50%;
    bottom: 32px;
    width: min(720px, 68%);
    transform: translateX(-50%) translateY(18px);
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 22px;
    align-items: center;
    min-height: 132px;
    border-radius: 24px;
    padding: 24px 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.det-demo-panel[data-phase="success"] .det-demo-result {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.det-demo-result-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #47ffa4;
    background: rgba(17,118,255,.14);
    border: 1px solid rgba(35,224,255,.28);
    box-shadow: 0 0 25px rgba(35,224,255,.22);
}
.det-demo-result h3 {
    font-size: clamp(1.35rem, 2.5vw, 2.05rem);
    margin-bottom: 8px;
}
.det-demo-result p {
    color: #b8c9e3;
    font-size: 1rem;
}
.det-demo-controls {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 108px minmax(220px, 1fr) 108px;
    gap: 20px;
    align-items: center;
    margin-top: 22px;
}
.det-demo-controls .det-game-control,
.det-demo-controls .det-game-start {
    min-height: 72px;
    border-radius: 18px;
    font-size: 1.05rem;
}
.det-demo-controls .det-game-control {
    font-size: 1.4rem;
}
.det-demo-controls .det-game-start {
    font-size: 1.28rem;
}
.det-game-hint i {
    margin-right: 8px;
}
.det-demo-panel[data-phase="success"] .det-game-start {
    background: linear-gradient(135deg, #28d7ff 0%, #1176ff 55%, #0757df 100%);
}
.det-demo-panel[data-phase="scanning"] .det-demo-recognition,
.det-demo-panel[data-phase="success"] .det-demo-recognition {
    border-color: rgba(71,255,164,.52);
    box-shadow: 0 18px 50px rgba(0,0,0,.36), 0 0 26px rgba(71,255,164,.12);
}
@media(max-width: 980px) {
    .det-demo-header {
        grid-template-columns: 52px 1fr;
    }
    .det-demo-plate {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }
    .det-demo-stage {
        min-height: 430px;
    }
    .det-demo-progress-card {
        width: 210px;
        padding: 16px;
    }
    .det-demo-recognition {
        width: min(320px, 52%);
    }
    .det-demo-result {
        width: 82%;
    }
}
@media(max-width: 720px) {
    .det-demo-panel {
        border-radius: 24px;
    }
    .det-demo-title h2 {
        font-size: 2rem;
    }
    .det-demo-status-icon {
        width: 48px;
        height: 48px;
    }
    .det-demo-stage {
        min-height: 340px;
    }
    .det-demo-progress-card {
        left: 12px;
        top: 12px;
        width: 155px;
        min-height: 72px;
        padding: 12px;
    }
    .det-demo-progress-card strong {
        font-size: .68rem;
        margin-bottom: 10px;
    }
    .det-demo-progress-line {
        margin-right: 42px;
    }
    .det-demo-progress-card em {
        right: 12px;
        bottom: 12px;
        font-size: .78rem;
    }
    .det-demo-recognition {
        left: 50%;
        top: 18px;
        width: min(260px, 62%);
        padding: 12px 12px 12px 46px;
    }
    .det-demo-recognition-check {
        left: 12px;
        top: 12px;
        width: 26px;
        height: 26px;
        font-size: .78rem;
    }
    .det-demo-recognition strong {
        font-size: .82rem;
    }
    .det-demo-recognition p {
        display: none;
    }
    .det-demo-recognition-plate {
        min-width: 130px;
        padding: 7px 10px;
        font-size: .9rem;
    }
    .det-demo-result {
        bottom: 16px;
        width: calc(100% - 28px);
        grid-template-columns: 46px 1fr;
        gap: 12px;
        min-height: 86px;
        padding: 14px 16px;
        border-radius: 18px;
    }
    .det-demo-result-icon {
        width: 38px;
        height: 38px;
    }
    .det-demo-result h3 {
        font-size: 1.1rem;
    }
    .det-demo-result p {
        font-size: .82rem;
        line-height: 1.35;
    }
    .det-demo-controls {
        grid-template-columns: 58px 1fr 58px;
        gap: 10px;
        margin-top: 14px;
    }
    .det-demo-controls .det-game-control,
    .det-demo-controls .det-game-start {
        min-height: 54px;
        border-radius: 15px;
        font-size: .92rem;
    }
}

/* DET Vision demo v17: use approved premium visual instead of cartoon canvas drawing */
.det-game-section--showcase{padding-top:34px}
.det-showcase-panel{position:relative;border-radius:30px;padding:18px;background:linear-gradient(180deg,rgba(7,17,32,.92),rgba(3,9,18,.96));border:1px solid rgba(58,156,255,.34);box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 60px rgba(18,118,255,.12);overflow:hidden}
.det-showcase-panel::before{content:"";position:absolute;inset:-30% auto auto 12%;width:42%;height:80%;background:radial-gradient(circle,rgba(35,224,255,.18),transparent 68%);filter:blur(30px);pointer-events:none}
.det-showcase-visual{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(80,170,255,.28);background:#020914;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.det-showcase-visual img{width:100%;display:block;border-radius:24px;transform:scale(1.002);transition:transform .7s ease,filter .5s ease}
.det-showcase-panel:hover .det-showcase-visual img{transform:scale(1.015);filter:saturate(1.07) contrast(1.02)}
.det-showcase-scan{position:absolute;top:18%;right:17%;width:20%;height:32%;background:linear-gradient(90deg,transparent,rgba(35,224,255,.26),transparent);clip-path:polygon(78% 0,100% 8%,38% 100%,0 90%);opacity:0;filter:blur(1px);mix-blend-mode:screen;pointer-events:none}
.det-showcase-pulse{position:absolute;border-radius:999px;border:2px solid rgba(35,224,255,.5);box-shadow:0 0 26px rgba(35,224,255,.4);opacity:0;pointer-events:none}
.det-showcase-pulse--camera{right:17.8%;top:22.5%;width:48px;height:48px}
.det-showcase-pulse--plate{left:47%;top:50.8%;width:122px;height:32px;border-radius:8px}
.det-showcase-play-zone{position:absolute;left:18%;right:18%;bottom:5%;height:11%;border:0;background:transparent;cursor:pointer;border-radius:18px}
.det-showcase-livebar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding:18px 20px;border-radius:20px;background:rgba(7,18,32,.74);border:1px solid rgba(80,170,255,.18)}
.det-showcase-livebar strong{display:block;color:#fff;font-size:1.12rem;margin-bottom:5px}
.det-showcase-livebar p{font-size:.94rem;color:#b9c9e3}
.det-showcase-panel.is-running .det-showcase-scan{animation:demoScanSweep 2.4s ease-in-out infinite;opacity:.85}
.det-showcase-panel.is-running .det-showcase-pulse{animation:demoPulse 1.3s ease-in-out infinite;opacity:1}
.det-showcase-panel.is-running .det-showcase-visual img{filter:saturate(1.12) contrast(1.04) brightness(1.04)}
.det-showcase-panel.is-success{border-color:rgba(48,255,172,.38);box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 70px rgba(47,255,177,.14)}
.det-showcase-panel.is-success .det-showcase-scan{opacity:.0;animation:none}
.det-showcase-panel.is-success .det-showcase-pulse--plate{border-color:rgba(48,255,172,.7);box-shadow:0 0 34px rgba(48,255,172,.45);opacity:1;animation:demoSuccessPlate 1.1s ease-in-out infinite}
@keyframes demoScanSweep{0%{transform:translate3d(-18%,8%,0) rotate(-3deg);opacity:.05}35%{opacity:.8}70%{opacity:.8}100%{transform:translate3d(-60%,38%,0) rotate(-3deg);opacity:.05}}
@keyframes demoPulse{0%,100%{transform:scale(.9);opacity:.22}50%{transform:scale(1.08);opacity:.95}}
@keyframes demoSuccessPlate{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.05);opacity:1}}
@media(max-width:760px){.det-showcase-panel{padding:10px;border-radius:22px}.det-showcase-visual,.det-showcase-visual img{border-radius:18px}.det-showcase-livebar{flex-direction:column;align-items:stretch}.det-showcase-livebar .mock-btn{width:100%}.det-showcase-play-zone{left:10%;right:10%;bottom:3%;height:13%}}

/* v18 fix: make the premium DET Vision panel truly clickable and start from a ready state */
.det-showcase-panel{isolation:isolate}
.det-showcase-panel:not(.is-success) .det-showcase-visual img{filter:brightness(.58) saturate(.85) contrast(1.03)}
.det-showcase-panel.is-running .det-showcase-visual img{filter:brightness(.72) saturate(1.08) contrast(1.04)}
.det-showcase-panel.is-success .det-showcase-visual img{filter:saturate(1.08) contrast(1.03)}
.det-showcase-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,8,18,.54),rgba(2,8,18,.24) 48%,rgba(2,8,18,.58));pointer-events:none;transition:opacity .35s ease}
.det-showcase-panel.is-success .det-showcase-veil{opacity:0}
.det-showcase-state-card{position:absolute;z-index:7;left:50%;top:50%;width:min(520px,76%);transform:translate(-50%,-50%);padding:22px 24px;border-radius:22px;background:rgba(3,12,25,.82);border:1px solid rgba(92,190,255,.28);box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 34px rgba(35,224,255,.14);backdrop-filter:blur(14px);text-align:center;transition:opacity .32s ease,transform .32s ease,border-color .32s ease}
.det-showcase-state-card span{display:inline-flex;margin-bottom:8px;color:#7bd7ff;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:900}
.det-showcase-state-card strong{display:block;color:#fff;font-size:clamp(1.4rem,2.5vw,2.4rem);letter-spacing:-.04em;margin-bottom:8px}
.det-showcase-state-card p{max-width:440px;margin:0 auto 16px;color:#c3d2ea;font-size:.98rem;line-height:1.55}
.det-showcase-mini-progress{display:flex;align-items:center;gap:12px;justify-content:center}
.det-showcase-mini-progress{--p:0%}
.det-showcase-mini-progress::before{content:"";width:min(280px,70%);height:9px;border-radius:999px;background:linear-gradient(90deg,#27ddff var(--p),rgba(255,255,255,.14) var(--p));box-shadow:0 0 20px rgba(35,224,255,.18)}
.det-showcase-mini-progress i{display:none}
.det-showcase-mini-progress em{font-style:normal;color:#72c8ff;font-weight:900}
.det-showcase-visible-start{position:absolute;z-index:9;left:18%;right:18%;bottom:5.7%;min-height:clamp(52px,6.7vw,86px);border-radius:20px;border:1px solid rgba(255,255,255,.28);background:linear-gradient(135deg,#2fd7ff,#086bff 62%,#0753e5);color:#fff;font-weight:900;font-size:clamp(1rem,2vw,1.55rem);display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;box-shadow:0 22px 52px rgba(10,103,255,.42),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}
.det-showcase-visible-start:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 26px 62px rgba(10,103,255,.48),0 0 26px rgba(35,224,255,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.det-showcase-visible-start i{font-size:.95em}
.det-showcase-play-zone{z-index:10;left:0;right:0;top:0;bottom:0;height:auto;border-radius:24px;pointer-events:none}
.det-showcase-panel.is-ready .det-showcase-play-zone,.det-showcase-panel.is-success .det-showcase-play-zone{pointer-events:auto}
.det-showcase-panel.is-running .det-showcase-visible-start{pointer-events:none;filter:saturate(.9);opacity:.88}
.det-showcase-panel.is-running .det-showcase-state-card{border-color:rgba(35,224,255,.42);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 40px rgba(35,224,255,.24)}
.det-showcase-panel.is-success .det-showcase-state-card{top:82%;width:min(580px,76%);padding:16px 20px;border-color:rgba(49,255,174,.36);background:rgba(3,12,25,.54)}
.det-showcase-panel.is-success .det-showcase-state-card span{color:#56ffb7}
.det-showcase-panel.is-success .det-showcase-state-card strong{font-size:clamp(1.1rem,1.8vw,1.55rem);margin-bottom:4px}
.det-showcase-panel.is-success .det-showcase-state-card p{font-size:.92rem;margin-bottom:0}
.det-showcase-panel.is-success .det-showcase-mini-progress{display:none}
.det-showcase-panel.is-success .det-showcase-visible-start i{animation:demoRotateIcon 1.8s linear infinite}
@keyframes demoRotateIcon{to{transform:rotate(360deg)}}
@media(max-width:760px){.det-showcase-state-card{width:86%;top:45%;padding:18px}.det-showcase-state-card p{font-size:.88rem}.det-showcase-visible-start{left:10%;right:10%;bottom:4.5%;min-height:50px;border-radius:15px}.det-showcase-panel.is-success .det-showcase-state-card{top:76%;width:84%}}

/* DET Vision gerçek oynanabilir mini oyun v19 */
.det-drive-section{position:relative;z-index:2}.det-drive-panel{position:relative;padding:30px;border-radius:32px;background:linear-gradient(180deg,rgba(4,13,28,.96),rgba(3,9,20,.98));border:1px solid rgba(40,160,255,.32);box-shadow:0 32px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}.det-drive-panel::before{content:"";position:absolute;inset:-30% 15% auto;height:260px;background:radial-gradient(circle,rgba(35,224,255,.18),transparent 65%);filter:blur(20px);pointer-events:none}.det-drive-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.det-drive-status{display:flex;align-items:center;gap:18px}.det-drive-status-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#44dfff;font-size:1.55rem;background:rgba(21,110,255,.12);border:1px solid rgba(35,224,255,.36);box-shadow:0 0 30px rgba(35,224,255,.16)}.det-drive-status small{display:block;color:#32a8ff;font-size:.82rem;letter-spacing:.18em;font-weight:900;margin-bottom:6px}.det-drive-status strong{display:block;font-size:clamp(2rem,4vw,3.6rem);line-height:1;color:#fff;letter-spacing:-.05em}.det-drive-status p{margin-top:8px;color:#aebfdd}.det-drive-plate{display:flex;align-items:center;overflow:hidden;border-radius:14px;background:#f4f7fb;color:#0a1320;border:2px solid rgba(72,171,255,.72);box-shadow:0 0 30px rgba(38,144,255,.24),inset 0 0 0 2px rgba(0,0,0,.14);font-weight:900}.det-drive-plate span{align-self:stretch;display:grid;place-items:center;background:#0d66df;color:#fff;padding:0 12px;font-size:.92rem}.det-drive-plate strong{padding:12px 28px;font-size:clamp(1.5rem,3vw,3rem);letter-spacing:.06em}.det-drive-stage{position:relative;z-index:2;border-radius:24px;overflow:hidden;border:1px solid rgba(79,171,255,.18);background:#020914;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}.det-drive-stage canvas{display:block;width:100%;height:auto;min-height:420px;background:#030a15}.det-drive-hud{position:absolute;z-index:4;border-radius:18px;background:rgba(2,10,22,.82);border:1px solid rgba(70,177,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(14px)}.det-drive-progress-card{left:26px;top:26px;min-width:245px;padding:18px}.det-drive-progress-card strong{display:block;font-size:.88rem;color:#e6f2ff;font-weight:900;letter-spacing:.03em;margin-bottom:12px}.det-drive-progress-line{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.det-drive-progress-line span{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#26e3ff,#0e73ff,#52ffba);box-shadow:0 0 18px rgba(38,227,255,.5);transition:width .2s ease}.det-drive-progress-card em{position:absolute;right:18px;bottom:15px;color:#7bcfff;font-style:normal;font-weight:900}.det-drive-recognition{right:28px;top:26px;width:min(330px,36%);padding:18px;opacity:.88;transform:translateY(0);transition:.28s ease}.det-drive-recognition div{display:flex;align-items:center;gap:10px;color:#56ffb4;font-size:1.05rem;margin-bottom:8px}.det-drive-recognition i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(76,255,181,.4)}.det-drive-recognition p{font-size:.9rem;color:#bfcae2}.det-drive-recognition span{display:inline-flex;margin-top:13px;padding:9px 22px;border-radius:10px;background:linear-gradient(180deg,#fff,#c9d7e8);color:#08131f;font-weight:900;letter-spacing:.08em;box-shadow:0 0 20px rgba(80,210,255,.18)}.det-drive-message{left:50%;bottom:28px;transform:translateX(-50%);width:min(660px,72%);padding:20px 24px;display:flex;align-items:center;gap:20px}.det-drive-message i{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;font-size:1.25rem;color:#26e3ff;background:rgba(20,113,255,.1);border:1px solid rgba(35,224,255,.28)}.det-drive-message strong{display:block;font-size:clamp(1.25rem,2.4vw,2.1rem);line-height:1.1;color:#fff;margin-bottom:6px}.det-drive-message p{font-size:.98rem;color:#bfcae0}.det-drive-panel[data-mode="running"] .det-drive-recognition{opacity:.55}.det-drive-panel[data-mode="scanning"] .det-drive-recognition,.det-drive-panel[data-mode="success"] .det-drive-recognition{opacity:1;border-color:rgba(72,255,178,.58);box-shadow:0 0 42px rgba(72,255,178,.18),0 18px 50px rgba(0,0,0,.42)}.det-drive-panel[data-mode="success"] .det-drive-message{border-color:rgba(72,255,178,.5);box-shadow:0 0 45px rgba(72,255,178,.14),0 18px 50px rgba(0,0,0,.42)}.det-drive-panel[data-mode="crash"] .det-drive-message{border-color:rgba(255,92,92,.55);box-shadow:0 0 45px rgba(255,80,80,.14),0 18px 50px rgba(0,0,0,.42)}.det-drive-controls{position:relative;z-index:3;display:grid;grid-template-columns:112px 1fr 112px;gap:22px;align-items:center;margin-top:22px}.det-drive-control,.det-drive-start{border:1px solid rgba(80,180,255,.35);color:#fff;background:rgba(5,16,32,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.24);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.det-drive-control:hover,.det-drive-start:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(7,97,255,.22),inset 0 1px 0 rgba(255,255,255,.08)}.det-drive-control{height:78px;border-radius:18px;font-size:1.6rem}.det-drive-start{height:78px;border-radius:18px;font-size:1.2rem;font-weight:900;background:linear-gradient(135deg,#29c9ff,#0d6fff 65%,#0657e9);display:flex;gap:12px;align-items:center;justify-content:center}.det-drive-help{position:relative;z-index:3;text-align:center;margin-top:14px;color:#a9b8d1}.det-drive-help i{margin-right:8px;color:#d7e8ff}.det-drive-panel.is-pressed .det-drive-start{transform:scale(.985)}@media(max-width:980px){.det-drive-header{display:grid}.det-drive-plate{justify-self:start}.det-drive-progress-card{left:14px;top:14px;min-width:190px;padding:14px}.det-drive-recognition{right:14px;top:14px;width:300px;max-width:calc(100% - 28px)}.det-drive-message{width:calc(100% - 28px);bottom:14px}.det-drive-controls{grid-template-columns:80px 1fr 80px;gap:12px}.det-drive-control,.det-drive-start{height:64px}.det-drive-stage canvas{min-height:360px}}@media(max-width:680px){.det-drive-panel{padding:18px}.det-drive-status strong{font-size:2rem}.det-drive-status-icon{width:52px;height:52px}.det-drive-plate strong{font-size:1.35rem;padding:10px 16px}.det-drive-stage canvas{min-height:330px}.det-drive-progress-card{position:absolute;width:calc(100% - 28px);min-width:0}.det-drive-recognition{top:96px;width:calc(100% - 28px)}.det-drive-message{display:none}.det-drive-controls{grid-template-columns:68px 1fr 68px}.det-drive-control,.det-drive-start{height:58px;border-radius:16px}.det-drive-start{font-size:.96rem}.det-drive-help{font-size:.86rem}}

/* DET Vision v20 - gerçek oynanabilir demo */
.vision-game-section{position:relative;z-index:2}.vision-game-panel{position:relative;padding:28px;border-radius:32px;background:linear-gradient(180deg,rgba(4,13,29,.96),rgba(3,8,18,.98));border:1px solid rgba(57,168,255,.36);box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}.vision-game-panel:before{content:"";position:absolute;inset:-180px 15% auto;height:300px;background:radial-gradient(circle,rgba(35,224,255,.18),transparent 65%);filter:blur(22px);pointer-events:none}.vision-game-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px}.vision-game-status{display:flex;align-items:center;gap:18px}.vision-game-status-icon{width:66px;height:66px;display:grid;place-items:center;border-radius:50%;color:#38e3ff;font-size:1.5rem;background:rgba(18,110,255,.12);border:1px solid rgba(35,224,255,.34);box-shadow:0 0 28px rgba(35,224,255,.14)}.vision-game-status small{display:block;color:#36a7ff;font-size:.82rem;letter-spacing:.18em;font-weight:900;margin-bottom:6px}.vision-game-status strong{display:block;font-size:clamp(2rem,4vw,3.35rem);line-height:1;color:#fff;letter-spacing:-.055em}.vision-game-status p{margin-top:8px;color:#b7c6df}.vision-game-plate{display:flex;align-items:center;overflow:hidden;border-radius:15px;background:#f4f7fb;color:#0a1320;border:2px solid rgba(72,171,255,.72);box-shadow:0 0 30px rgba(38,144,255,.25),inset 0 0 0 2px rgba(0,0,0,.14);font-weight:900;flex:0 0 auto}.vision-game-plate span{align-self:stretch;display:grid;place-items:center;background:#0d66df;color:#fff;padding:0 12px;font-size:.92rem}.vision-game-plate strong{padding:12px 28px;font-size:clamp(1.35rem,3vw,2.7rem);letter-spacing:.06em}.vision-game-info-row{position:relative;z-index:3;display:grid;grid-template-columns:1.1fr .7fr 1.15fr;gap:14px;margin-bottom:18px}.vision-mini-card{padding:16px 18px;border-radius:18px;background:rgba(3,12,24,.72);border:1px solid rgba(70,177,255,.22);box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)}.vision-mini-card span{display:block;color:#a9c8f2;font-size:.74rem;font-weight:900;letter-spacing:.12em;margin-bottom:7px}.vision-mini-card strong{display:block;color:#fff;font-size:1.14rem;line-height:1.1}.vision-mini-card small{display:block;color:#8fa4c4;margin-top:5px}.vision-progress{height:9px;background:rgba(255,255,255,.1);border-radius:999px;margin-top:12px;overflow:hidden}.vision-progress i{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#25dcff,#0d73ff,#55ffba);box-shadow:0 0 18px rgba(37,220,255,.45);transition:width .18s linear}.vision-game-stage{position:relative;z-index:2;border-radius:26px;overflow:hidden;border:1px solid rgba(83,178,255,.2);background:#020914;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}.vision-game-stage canvas{display:block;width:100%;height:auto;min-height:440px;background:#030a15}.vision-game-modal{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(2,8,18,.25),rgba(2,8,18,.4));backdrop-filter:blur(2px);opacity:1;visibility:visible;transition:opacity .22s ease,visibility .22s ease}.vision-game-modal.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.vision-game-modal-card{width:min(500px,calc(100% - 32px));padding:28px;border-radius:24px;text-align:center;background:rgba(3,12,25,.9);border:1px solid rgba(35,224,255,.36);box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 42px rgba(35,224,255,.12)}.vision-game-modal-card span{display:inline-flex;color:#70dfff;font-size:.8rem;letter-spacing:.18em;font-weight:900;margin-bottom:10px}.vision-game-modal-card h3{font-size:clamp(1.9rem,4vw,3rem);color:#fff;margin-bottom:10px}.vision-game-modal-card p{color:#c5d3e8;max-width:430px;margin-inline:auto}.vision-game-controls{position:relative;z-index:3;display:grid;grid-template-columns:110px 1fr 110px;gap:20px;align-items:center;margin-top:20px}.vision-control-btn,.vision-start-btn{border:1px solid rgba(80,180,255,.35);color:#fff;background:rgba(5,16,32,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.24);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.vision-control-btn:hover,.vision-start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 42px rgba(7,97,255,.24),inset 0 1px 0 rgba(255,255,255,.08)}.vision-control-btn{height:76px;border-radius:18px;font-size:1.55rem}.vision-start-btn{height:76px;border-radius:18px;font-size:1.17rem;font-weight:900;background:linear-gradient(135deg,#29c9ff,#0d6fff 65%,#0657e9);display:flex;gap:12px;align-items:center;justify-content:center}.vision-start-btn:disabled{opacity:.76;cursor:default}.vision-game-help{position:relative;z-index:3;text-align:center;margin-top:14px;color:#a9b8d1}.vision-game-help i{margin-right:8px;color:#d7e8ff}.vision-game-panel.is-pressed .vision-start-btn,.vision-game-panel.is-pressed .vision-control-btn{transform:scale(.985)}.vision-game-panel[data-vision-mode="success"] .vision-game-status-icon{color:#62ffbd;border-color:rgba(98,255,189,.42);box-shadow:0 0 34px rgba(98,255,189,.18)}.vision-game-panel[data-vision-mode="crash"] .vision-game-status-icon{color:#ff7c7c;border-color:rgba(255,110,110,.5);box-shadow:0 0 34px rgba(255,80,80,.16)}
@media(max-width:980px){.vision-game-header{display:grid}.vision-game-plate{justify-self:start}.vision-game-info-row{grid-template-columns:1fr}.vision-game-controls{grid-template-columns:80px 1fr 80px;gap:12px}.vision-control-btn,.vision-start-btn{height:64px}.vision-game-stage canvas{min-height:360px}}
@media(max-width:680px){.vision-game-panel{padding:18px;border-radius:24px}.vision-game-status strong{font-size:2rem}.vision-game-status-icon{width:52px;height:52px}.vision-game-plate strong{font-size:1.3rem;padding:10px 16px}.vision-game-stage canvas{min-height:330px}.vision-game-controls{grid-template-columns:64px 1fr 64px}.vision-control-btn,.vision-start-btn{height:58px;border-radius:16px}.vision-start-btn{font-size:.95rem}.vision-game-help{font-size:.86rem}.vision-game-modal-card{padding:22px}}


/* v21 clean rollback: single playable DET Vision game, first stable layout */
.vision-game-section,.vision-game-panel,.det-showcase-panel,.det-demo-panel{display:none!important}
.det-game-section{display:block!important;position:relative;padding-top:30px;padding-bottom:38px}
.det-game-shell{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;align-items:center}
.det-game-card{position:relative;overflow:hidden;border-radius:26px;padding:18px;background:linear-gradient(180deg,rgba(10,24,43,.88),rgba(3,8,18,.96));border:1px solid rgba(35,224,255,.22);box-shadow:0 28px 80px rgba(0,0,0,.42),0 0 38px rgba(35,224,255,.10),inset 0 1px 0 rgba(255,255,255,.06)}
#detVisionGame{position:relative;z-index:1;width:100%;aspect-ratio:980/520;display:block;border-radius:22px;background:#030812;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 70px rgba(17,118,255,.12),0 16px 42px rgba(0,0,0,.35)}
.det-game-controls{position:relative;z-index:2;display:grid;grid-template-columns:60px 1fr 60px;gap:12px;align-items:center;margin-top:14px}.det-game-control,.det-game-start{border:1px solid rgba(35,224,255,.22);color:#fff;background:linear-gradient(180deg,rgba(13,27,47,.82),rgba(7,14,26,.94));border-radius:16px;min-height:52px;font-weight:900;cursor:pointer}.det-game-start{background:linear-gradient(135deg,#1fc7ff 0%,#0b6fff 62%,#054bd7 100%);box-shadow:0 18px 40px rgba(8,102,255,.32),inset 0 1px 0 rgba(255,255,255,.18)}
@media(max-width:1180px){.det-game-shell{grid-template-columns:1fr}.det-game-copy{text-align:center}.det-game-copy p{margin-inline:auto}.det-game-badges{justify-content:center}}
@media(max-width:720px){.det-game-card{padding:12px;border-radius:22px}.det-game-controls{grid-template-columns:54px 1fr 54px;gap:8px}.det-game-control,.det-game-start{min-height:48px;border-radius:14px;font-size:.9rem}}