/* ===================================================================== 위앤유텍 상세 페이지 공유 셸 (wny.css) - 메인 시안 ax-v3 / media-v3 의 디자인 토큰·컴포넌트를 공유 자산화 - 부문 테마는 로 전환 ===================================================================== */ /* ============ TOKENS — 기본(AX · 블루 · 다크) ============ */ :root{ --bg:#0A0B14; --bg-soft:#0C0E1A; --surface:#181A24; --surface-2:#1F2230; --bg-nav:rgba(10,11,20,.84); --cta-deep:#101220; --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14); --text:#F4F6FB; --text-soft:#C7CDE8; --text-mute:#8A92BC; --accent:#4C7BFF; --accent-deep:#2347D9; --accent-glow:rgba(76,123,255,.45); --accent-2:#7B61FF; --highlight:#FFE500; --highlight-glow:rgba(255,229,0,.4); --ok:#52F28C; --ink:#06140D; --radius:18px; --radius-lg:28px; --maxw:1200px; --shadow-card:0 1px 0 rgba(255,255,255,.06) inset, 0 22px 48px -24px rgba(0,0,0,.92); --shadow-hover:0 1px 0 rgba(255,255,255,.1) inset, 0 36px 72px -28px rgba(0,0,0,1), 0 0 0 1px var(--accent-glow); --ease:cubic-bezier(.22,.61,.36,1); --grad-accent:linear-gradient(135deg,var(--accent),var(--accent-deep)); } /* ============ TOKENS — 플랫폼(미디어 · 그린) ============ */ [data-dept="media"]{ --bg:#091410; --bg-soft:#0B1812; --surface:#10211A; --surface-2:#16291F; --bg-nav:rgba(9,20,16,.84); --cta-deep:#0A1611; --text:#F1F7F3; --text-soft:#B5CFC2; --text-mute:#84A191; --accent:#2BD67B; --accent-deep:#12A157; --accent-glow:rgba(43,214,123,.42); --accent-2:#15B8C4; --highlight:#C6FF4F; --highlight-glow:rgba(198,255,79,.42); --ok:#2BD67B; --ink:#06140D; --radius-lg:26px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:"Pretendard",-apple-system,system-ui,sans-serif; background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased; line-height:1.5;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} section{position:relative} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:1} .scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200; background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .12s linear} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* ============ BACKGROUND DECOR ============ */ .sec-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .d-orb{position:absolute;border-radius:50%;filter:blur(90px)} /* ============ SCROLL REVEAL ============ */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.09s} .reveal[data-d="2"]{transition-delay:.18s} .reveal[data-d="3"]{transition-delay:.27s} .reveal[data-d="4"]{transition-delay:.36s} .reveal[data-d="5"]{transition-delay:.45s} /* ============ W MARK ============ */ .wmark{flex:none} .wmark.s{width:34px;height:31px} .wmark.m{width:38px;height:35px} /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px; border-radius:999px;cursor:pointer;border:1px solid transparent; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s} .btn-primary{padding:12px 22px;color:#fff;background:var(--grad-accent); box-shadow:0 10px 26px -10px var(--accent-glow),0 1px 0 rgba(255,255,255,.2) inset} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--accent-glow),0 1px 0 rgba(255,255,255,.28) inset} .btn-ghost{padding:12px 22px;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line-strong)} .btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:var(--accent-glow)} .btn-lg{padding:16px 30px;font-size:15px} /* ============ NAV ============ */ .nav{position:fixed;top:0;left:0;right:0;z-index:100; transition:background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent} .nav.scrolled{background:var(--bg-nav);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:78px} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:.01em} .logo .t{color:#fff}.logo .t i{font-style:normal;color:var(--text-mute);font-weight:700;margin:0 1px} .nav-menu{display:flex;gap:34px;list-style:none} .nav-menu>li{position:relative} .nav-menu>li:hover::before{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:16px} .nav-menu a{font-size:15px;color:var(--text-soft);font-weight:500;transition:color .2s} .nav-menu a:hover,.nav-menu a.active{color:var(--text)} .nav-menu>li>a .caret{font-size:9px;color:var(--text-mute);margin-left:4px} .nav-menu .dd{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);min-width:186px; background:var(--surface);border:1px solid var(--line-strong);border-radius:14px; box-shadow:0 24px 48px -18px rgba(0,0,0,.85);padding:8px; opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease)} .nav-menu>li:hover .dd,.nav-menu>li:focus-within .dd{opacity:1;visibility:visible;transform:translate(-50%,0)} .nav-menu .dd a{display:block;padding:9px 14px;border-radius:9px;font-size:14px;color:var(--text-soft);white-space:nowrap} .nav-menu .dd a:hover{background:rgba(255,255,255,.06);color:var(--text)} .nav-menu .dd .soon{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--text-mute); border:1px solid var(--line);border-radius:5px;padding:1px 5px;vertical-align:1px} .nav-right{display:flex;align-items:center;gap:18px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px} /* mobile drawer */ .nav-mobile{display:none} @media(max-width:680px){ .nav-mobile{position:fixed;inset:78px 0 auto 0;z-index:99;background:var(--bg-nav);backdrop-filter:blur(18px); border-bottom:1px solid var(--line);padding:14px 20px 22px;transform:translateY(-12px);opacity:0; pointer-events:none;transition:opacity .25s,transform .25s} .nav-mobile.open{display:block;opacity:1;transform:none;pointer-events:auto} .nav-mobile a{display:block;padding:12px 6px;font-size:16px;color:var(--text-soft);border-bottom:1px solid var(--line)} .nav-mobile a.sub{padding-left:20px;font-size:14px;color:var(--text-mute)} } /* ============ PAGE HERO (서브페이지 공용) ============ */ .page-hero{position:relative;padding:150px 0 64px;overflow:hidden;border-bottom:1px solid var(--line)} .page-hero::after{content:"";position:absolute;inset:0;z-index:0; background:radial-gradient(ellipse at 78% -10%,var(--accent-glow),transparent 56%)} .page-hero .wrap{position:relative;z-index:1} .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-mute);margin-bottom:22px;flex-wrap:wrap} .crumb a:hover{color:var(--text-soft)} .crumb .sep{opacity:.5} .crumb .cur{color:var(--accent)} .page-hero .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);margin-bottom:16px} .page-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.18} .page-hero h1 .g{background:linear-gradient(110deg,var(--text),var(--accent) 60%,var(--accent-2)); -webkit-background-clip:text;background-clip:text;color:transparent} .page-hero .lead{margin-top:20px;max-width:680px;font-size:16px;color:var(--text-soft);line-height:1.8} /* ============ SECTION HEAD ============ */ .sec{padding:84px 0} .sec.tight{padding:60px 0} .sec.soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec-head{margin-bottom:46px;max-width:820px} .sec-meta{display:flex;align-items:center;gap:13px;margin-bottom:16px} .sec-meta .tag{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)} .sec-line{flex:1;height:1px;background:var(--line-strong)} .sec-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.26} .sec-head p{margin-top:14px;color:var(--text-soft);font-size:15px;line-height:1.75} /* ============ PROSE ============ */ .prose{max-width:820px;color:var(--text-soft);font-size:16px;line-height:1.95} .prose p{margin-bottom:18px} .prose strong{color:var(--text);font-weight:700} .lead-copy{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--text)} /* ============ FEATURE / CARD GRID ============ */ .grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{position:relative;padding:28px;border-radius:var(--radius);background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow-card);overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--accent-glow)} .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px; background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:var(--accent);font-size:20px;font-weight:800} .card h4{font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em} .card .en{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:6px} .card p{font-size:14px;color:var(--text-soft);line-height:1.7} .card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px} .card ul li{font-size:13.5px;color:var(--text-soft);line-height:1.6;padding-left:18px;position:relative} .card ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px; background:var(--accent);box-shadow:0 0 8px var(--accent-glow)} .card ul li b{color:var(--text);font-weight:700} /* compact "why" pill cards */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .why{padding:24px 22px;border-radius:var(--radius);background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--line-strong);box-shadow:var(--shadow-card);transition:transform .3s var(--ease)} .why:hover{transform:translateY(-5px)} .why .en{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px} .why p{font-size:13px;color:var(--text-soft);line-height:1.6} /* ============ KPI ============ */ .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .kpi{padding:30px 26px;border-radius:var(--radius); background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--line-strong);box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .kpi:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)} .kpi.hi{background:linear-gradient(165deg,var(--highlight-glow),rgba(255,255,255,.02));border-color:var(--accent-glow)} .kpi .lbl{font-size:13px;color:var(--text-mute);font-weight:600;margin-bottom:12px} .kpi .num{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1} .kpi.brand .num{font-size:26px;background:linear-gradient(120deg,#fff,var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent} .kpi .desc{font-size:13px;color:var(--text-soft);margin-top:12px;line-height:1.6} /* ============ TABSET (파트너 솔루션) ============ */ .tabset{display:grid;grid-template-columns:248px 1fr;gap:30px;align-items:start} .tabnav{position:sticky;top:100px;display:flex;flex-direction:column;gap:8px} .tabnav button{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer; padding:15px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line); color:var(--text-soft);font-size:15px;font-weight:600;transition:.25s var(--ease)} .tabnav button .dot{width:9px;height:9px;border-radius:50%;background:var(--text-mute);flex:none;transition:.25s} .tabnav button:hover{border-color:var(--line-strong);color:var(--text)} .tabnav button.on{background:var(--grad-accent);color:#fff;border-color:transparent;box-shadow:0 12px 26px -12px var(--accent-glow)} .tabnav button.on .dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)} .tabpanel{display:none} .tabpanel.on{display:block;animation:fade-up .4s var(--ease)} @keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .tabpanel .phead{margin-bottom:26px} .tabpanel .phead .pk{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:10px} .tabpanel .phead h3{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.3;margin-bottom:14px} .tabpanel .phead p{font-size:15px;color:var(--text-soft);line-height:1.8;max-width:760px} .tabpanel .phead .link{display:inline-flex;gap:6px;margin-top:14px;font-size:14px;font-weight:600;color:var(--accent)} .subhead{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute); margin:38px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)} /* product/feature block list */ .prodblock{padding:24px 26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line); box-shadow:var(--shadow-card);transition:transform .3s var(--ease),border-color .3s} .prodblock:hover{transform:translateY(-4px);border-color:var(--accent-glow)} .prodblock h5{font-size:17px;font-weight:700;margin-bottom:4px} .prodblock .cap{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:16px} .prodblock ul{list-style:none;display:flex;flex-direction:column;gap:10px} .prodblock ul li{font-size:13.5px;color:var(--text-soft);line-height:1.6;padding-left:18px;position:relative} .prodblock ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)} .prodblock ul li b{color:var(--text);font-weight:700} /* chips list (서비스/키워드) */ .taglist{display:flex;flex-wrap:wrap;gap:9px} .taglist span{font-size:13px;font-weight:600;color:var(--text-soft);padding:8px 14px;border-radius:999px; background:rgba(255,255,255,.04);border:1px solid var(--line)} .taglist span::before{content:"#";color:var(--accent);font-weight:800;margin-right:3px} /* service list (체크형) */ .svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .svc-list .it{display:flex;gap:12px;padding:16px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line)} .svc-list .it .ck{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center; background:var(--grad-accent);color:#fff;font-size:12px;font-weight:800} .svc-list .it b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px} .svc-list .it span{font-size:13px;color:var(--text-soft);line-height:1.55} /* ============ PROCESS / STEPS ============ */ .steps{display:grid;gap:16px} .steps.c4{grid-template-columns:repeat(4,1fr)} .steps.c5{grid-template-columns:repeat(5,1fr)} .step{position:relative;padding:26px 22px;border-radius:var(--radius);background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow-card)} .step .sno{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.06em;margin-bottom:14px} .step h4{font-size:17px;font-weight:700;margin-bottom:10px} .step p{font-size:13px;color:var(--text-soft);line-height:1.65} .step .dur{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;color:var(--accent); border:1px solid var(--accent-glow);border-radius:6px;padding:3px 9px} .step .dur.free{color:var(--highlight);border-color:var(--highlight-glow)} /* simple flow (채용절차) */ .flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .flow .fstep{flex:1;min-width:150px;padding:22px;border-radius:14px;text-align:center; background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:16px} .flow .fstep .n{display:block;font-size:12px;color:var(--accent);font-weight:800;margin-bottom:8px} .flow .farrow{color:var(--accent);font-size:20px;font-weight:800} /* values (팀문화) */ .values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .value{padding:28px 24px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--line-strong)} .value .en{font-size:19px;font-weight:800;color:var(--accent);margin-bottom:10px} .value p{font-size:14px;color:var(--text-soft);line-height:1.6} /* history list (주요 사업이력) */ .history{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .history .h{display:flex;gap:14px;padding:18px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line); transition:border-color .25s,transform .25s} .history .h:hover{border-color:var(--accent-glow);transform:translateX(3px)} .history .h .co{flex:none;font-size:13px;font-weight:800;color:var(--accent);min-width:108px} .history .h .desc{font-size:13.5px;color:var(--text-soft);line-height:1.55} /* ============ BOARD (다운로드/보도자료) ============ */ .board{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .board .row{display:grid;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line); transition:background .2s} .board .row:last-child{border-bottom:0} .board .row:hover{background:rgba(255,255,255,.03)} .board.downloads .row{grid-template-columns:64px 1fr 120px 120px} .board.news .row{grid-template-columns:1fr 140px 120px} .board .row.head{background:rgba(255,255,255,.03);font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--text-mute)} .board .ftype{width:46px;height:58px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800; background:var(--grad-accent);color:#fff} .board .ttl{font-size:15.5px;font-weight:700} .board .meta{font-size:13px;color:var(--text-mute)} .board .dl{display:inline-flex;gap:6px;font-size:13px;font-weight:600;color:var(--accent)} .empty{padding:64px 24px;text-align:center;color:var(--text-mute)} .empty .ic{font-size:34px;margin-bottom:14px;opacity:.6} .empty p{font-size:15px;line-height:1.7} .cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px} .cat-tabs .chip{font-size:13px;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-soft);transition:.25s var(--ease)} .cat-tabs .chip:hover{color:var(--text);border-color:var(--line-strong)} .cat-tabs .chip.on{background:var(--grad-accent);color:#fff;border-color:transparent} /* ============ CASES ============ */ .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .case{border-radius:var(--radius);border:1px solid rgba(255,255,255,.16);overflow:hidden; background:linear-gradient(165deg,var(--surface-2),var(--surface));box-shadow:var(--shadow-card); transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column} .case:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--accent-glow)} .case-logo{height:150px;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#EDF0F7)} .case-logo img{height:46px;width:auto} .case-logo .txt{font-size:22px;font-weight:800;color:#0A0B14;letter-spacing:-.02em} .case-body{padding:26px;display:flex;flex-direction:column;flex:1} .case-metric{display:flex;align-items:baseline;gap:9px;margin-bottom:14px} .case-metric b{font-size:36px;font-weight:800;letter-spacing:-.03em; background:linear-gradient(120deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .case-metric span{font-size:13px;color:var(--text-soft);font-weight:600} .case-quote{font-size:14px;color:var(--text-soft);line-height:1.7;margin-bottom:auto} .case .more{margin-top:20px;font-size:13px;color:var(--accent);font-weight:600;display:inline-flex;gap:5px} /* ============ FORM (문의하기) ============ */ .form-wrap{display:grid;grid-template-columns:1fr;gap:0;max-width:860px} .fieldset{margin-bottom:34px} .fieldset>.flabel{display:block;font-size:15px;font-weight:700;margin-bottom:14px} .fieldset>.flabel .req{color:var(--accent);margin-left:3px} .fieldset .hint{font-size:13px;color:var(--text-mute);margin:-6px 0 14px} .opt-grid{display:flex;flex-wrap:wrap;gap:10px} .opt{position:relative;cursor:pointer} .opt input{position:absolute;opacity:0;inset:0;cursor:pointer} .opt .box{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:12px; background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--text-soft);transition:.2s} .opt .box::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--text-mute);flex:none;transition:.2s} .opt.check .box::before{border-radius:5px} .opt:hover .box{border-color:var(--line-strong);color:var(--text)} .opt input:checked+.box{border-color:var(--accent);background:rgba(76,123,255,.08);color:var(--text)} [data-dept="media"] .opt input:checked+.box{background:rgba(43,214,123,.1)} .opt input:checked+.box::before{border-color:var(--accent);background:var(--accent); box-shadow:inset 0 0 0 3px var(--surface)} .opt.check input:checked+.box::before{box-shadow:none;background:var(--accent) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")} .grid-inputs{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} .field label{font-size:14px;font-weight:600;color:var(--text-soft)} .field label .req{color:var(--accent);margin-left:3px} .field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:12px; background:var(--surface);border:1px solid var(--line-strong);color:var(--text);font-size:15px; font-family:inherit;transition:border-color .2s,box-shadow .2s} .field textarea{min-height:140px;resize:vertical;line-height:1.6} .field input::placeholder,.field textarea::placeholder{color:var(--text-mute)} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);outline:none} .field .err{font-size:12.5px;color:#FF6B7A;display:none} .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#FF6B7A} .field.invalid .err{display:block} .agree{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-soft);cursor:pointer} .agree input{width:18px;height:18px;accent-color:var(--accent)} .form-actions{margin-top:8px} .form-msg{display:none;margin-top:20px;padding:18px 22px;border-radius:14px;font-size:14.5px;font-weight:600; background:rgba(82,242,140,.1);border:1px solid var(--ok);color:var(--text)} .form-msg.show{display:block;animation:fade-up .4s var(--ease)} .contact-aside{padding:26px 28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong); margin-bottom:38px;display:flex;flex-wrap:wrap;gap:28px} .contact-aside .ci .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:6px} .contact-aside .ci .v{font-size:17px;font-weight:700;color:var(--text)} .contact-aside .ci .v a:hover{color:var(--accent)} /* ============ CTA ============ */ .cta-card{position:relative;overflow:hidden;border-radius:var(--radius-lg); background:linear-gradient(150deg,var(--surface-2),var(--cta-deep)); border:1px solid var(--line-strong);padding:56px 54px;box-shadow:var(--shadow-card)} .cta-card .glow{position:absolute;width:460px;height:460px;right:-90px;top:-170px;border-radius:50%; filter:blur(80px);background:radial-gradient(circle,var(--accent-glow),transparent 70%)} .cta-in{position:relative;z-index:2} .cta-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-soft);margin-bottom:18px} .cta-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)} .cta-card h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px} .cta-card p{color:var(--text-soft);font-size:16px;margin-bottom:28px} .cta-actions{display:flex;gap:13px;flex-wrap:wrap} /* ============ FOOTER ============ */ .footer{border-top:1px solid var(--line);padding:46px 0 56px;background:var(--bg-soft)} .foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap} .foot-co{display:flex;gap:14px} .foot-co .info{font-size:13px;color:var(--text-mute);line-height:1.85} .foot-co .info b{color:var(--text-soft);font-weight:600} .foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:18px} .foot-sns{display:flex;gap:10px} .foot-sns a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line);color:var(--text-soft);transition:.25s} .foot-sns a:hover{border-color:var(--accent-glow);color:var(--accent);transform:translateY(-3px)} .foot-sns a svg{width:18px;height:18px} .foot-links{display:flex;gap:24px;font-size:13px;color:var(--text-soft);font-weight:500} .foot-links a:hover{color:var(--text)} .foot-copy{margin-top:30px;font-size:12px;color:var(--text-mute)} /* ============ FLOATING ============ */ .floating{position:fixed;right:28px;bottom:28px;z-index:90;display:flex;align-items:center;gap:9px; padding:14px 20px;border-radius:999px;font-weight:700;font-size:14px;color:#fff;background:var(--grad-accent); box-shadow:0 18px 40px -12px var(--accent-glow),0 1px 0 rgba(255,255,255,.2) inset; cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);opacity:0;transform:translateY(20px)} .floating.show{opacity:1;transform:none} .floating:hover{transform:translateY(-4px) scale(1.03)} .floating .pin{width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 8px var(--accent-glow)} [data-dept="ax"] .floating .pin{background:var(--ok)} /* ============ RESPONSIVE ============ */ @media(max-width:1024px){ .grid-4,.why-grid,.kpi-row,.values{grid-template-columns:repeat(2,1fr)} .grid-3,.steps.c4,.steps.c5{grid-template-columns:repeat(2,1fr)} .tabset{grid-template-columns:1fr} .tabnav{position:static;flex-direction:row;flex-wrap:wrap;overflow-x:auto} .tabnav button{flex:1;min-width:130px;justify-content:center} .history,.svc-list{grid-template-columns:1fr} } @media(max-width:680px){ .wrap{padding:0 20px} .nav-menu,.nav-right .ghost{display:none} .nav-toggle{display:block} .grid-2,.grid-3,.grid-4,.why-grid,.kpi-row,.values,.case-grid,.steps.c4,.steps.c5,.grid-inputs{grid-template-columns:1fr} .board.downloads .row{grid-template-columns:48px 1fr;gap:10px} .board.downloads .row .meta,.board.news .row .meta{display:none} .board.news .row{grid-template-columns:1fr auto} .cta-card{padding:40px 26px} .foot-top{flex-direction:column} .foot-right{align-items:flex-start} } @media(prefers-reduced-motion:reduce){ .reveal{transition:none;opacity:1;transform:none} .d-orb{animation:none} html{scroll-behavior:auto} }