:root { --navy:#173b51; --navy-900:#102e43; --navy-700:#27546a; --teal:#19a58c; --mint:#7de7ca; --cream:#f7f8f4; --paper:#fff; --ink:#183141; --muted:#647887; --line:#e2e8e8; --soft:#f0f5f2; --shadow:0 20px 70px rgba(13,42,58,.1); --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:95px; }
body { margin:0; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.container { width:min(1180px,calc(100% - 64px)); margin:0 auto; }
.skip-link { position:absolute; left:10px; top:-100px; background:var(--paper); padding:12px; z-index:100; }
.skip-link:focus { top:10px; }
.site-header { position:sticky; z-index:40; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-bottom:1px solid rgba(19,47,72,.08); }
.header-inner { min-height:86px; display:flex; gap:28px; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:11px; white-space:nowrap; }
.brand-symbol { width:35px; height:35px; background:var(--navy); border-radius:11px; position:relative; display:grid; place-items:center; }
.brand-symbol::before { content:""; position:absolute; width:20px; height:5px; border-radius:5px; background:var(--mint); transform:rotate(-38deg); }
.brand-symbol::after { content:""; position:absolute; width:5px; height:20px; border-radius:5px; background:var(--mint); transform:rotate(-38deg); }
.brand-wordmark { display:flex; flex-direction:column; line-height:1; letter-spacing:.1em; }
.brand-wordmark strong { font-size:21px; letter-spacing:.09em; font-weight:800; }
.brand-wordmark small { font-size:9px; letter-spacing:.34em; color:var(--muted); margin-top:5px; font-weight:700; }
.desktop-nav { display:flex; align-items:center; gap:28px; margin-left:auto; }
.desktop-nav a { font-size:13px; font-weight:650; color:#446070; transition:color .2s; }
.desktop-nav a:hover { color:var(--teal); }
.header-actions { display:flex; align-items:center; gap:17px; }
.language-switch { padding:3px; border:1px solid var(--line); border-radius:100px; display:flex; gap:2px; }
.language-button { border:0; background:transparent; color:#5f7581; font-size:11px; font-weight:800; padding:8px 9px; border-radius:100px; }
.language-button.is-active { color:#fff; background:var(--navy); }
.button { border:1px solid transparent; border-radius:9px; padding:16px 21px; font-size:13px; font-weight:750; display:inline-flex; gap:16px; align-items:center; justify-content:center; transition:transform .2s,background .2s,box-shadow .2s; white-space:normal; text-align:center; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(25,165,140,.16); }
.button-primary:hover { background:#128d77; }
.button-small { padding:13px 16px; font-size:12px; }
.button-outline { background:#fff; border-color:#d4e0dd; color:var(--navy); }
.button-outline:hover { background:#f5faf8; }
.hero { background:radial-gradient(ellipse at 80% 13%,#e0f8ed 0%,transparent 32%),linear-gradient(130deg,#f9faf7 7%,#eef5f1 100%); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:72px; padding:90px 0 100px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:#417363; font-weight:750; font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.eyebrow-dot { background:var(--teal); width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 5px rgba(25,165,140,.13); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:24px 0; font-size:clamp(38px,4.05vw,61px); line-height:1.095; letter-spacing:-.048em; font-weight:790; max-width:680px; }
h1 em { font-style:normal; color:var(--teal); }
.hero-description { font-size:16px; line-height:1.85; color:#56717b; max-width:545px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-locations { display:flex; gap:10px; align-items:center; color:#5d7981; font-size:13px; margin-top:33px; }
.location-icon { color:var(--teal); font-size:22px; }
.hero-visual { padding:24px 25px 19px; border:1px solid #dbe9e2; border-radius:19px; background:rgba(255,255,255,.93); box-shadow:var(--shadow); transform:rotate(1.2deg); }
.visual-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.visual-kicker { font-size:11px; letter-spacing:.16em; color:#7c959b; font-weight:800; }
.visual-badge { font-size:10px; font-weight:700; color:#277f6d; background:#e7f8ef; padding:8px 11px; border-radius:100px; }
.classroom-illustration { margin:0 auto; width:100%; max-width:470px; aspect-ratio:1.29; border:12px solid #f5f5ef; background:linear-gradient(125deg,#f4f5ef,#edf4ed); box-shadow:inset 0 0 0 2px #dce9e2; border-radius:9px; position:relative; padding:18% 14% 8%; }
.classroom-board { position:absolute; height:11%; width:42%; background:#274f56; border:6px solid #d5b990; top:7%; left:29%; border-radius:2px; }
.classroom-board span { display:block; width:45%; height:2px; background:#c8e8e0; margin:8px auto 0; transform:rotate(-8deg); }
.teacher-desk { width:26%; height:13%; background:#b9cfd1; box-shadow:2px 5px #9cbdbe; border-radius:3px; position:absolute; top:22%; left:37%; }
.teacher-desk i { position:absolute; width:35%; height:22%; left:30%; top:38%; background:#effaf9; border-radius:2px; }
.desk-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:22px 16px; height:75%; margin-top:5%; }
.student-desk { background:#bed9cf; border:3px solid #b0c6bc; border-radius:3px; position:relative; box-shadow:0 5px #a1bdb1; }
.student-desk::after { content:""; position:absolute; background:#638e88; width:55%; height:5px; border-radius:8px; left:22%; bottom:-14px; }
.student-desk i { display:block; width:34%; height:33%; background:#ecf6f3; position:absolute; top:15%; right:12%; transform:rotate(-13deg); }
.classroom-window { width:6px; height:41%; background:linear-gradient(#a1ded9,#e3f7ed); border-left:3px solid #a0c9bd; position:absolute; top:35%; right:1px; }
.visual-footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; font-size:11px; color:#5b7880; padding:19px 0 4px; font-weight:700; }
.visual-separator { width:4px; height:4px; border-radius:50%; background:var(--teal); }
.visual-disclaimer { color:#98a5a6; font-size:10px; text-align:center; margin:8px 0 0; }
.trust-strip { background:var(--navy); color:#e9f5f2; }
.trust-inner { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-inner>div { display:flex; align-items:center; gap:15px; padding:22px 25px; border-right:1px solid rgba(255,255,255,.12); font-size:12px; font-weight:650; }
.trust-inner>div:first-child { padding-left:0; }
.trust-inner>div:last-child { border:0; }
.trust-mark { color:var(--mint); font-size:12px; font-weight:900; }
.section { padding:99px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:36px; }
.section-label { color:var(--teal); font-size:11px; font-weight:850; letter-spacing:.2em; margin:0 0 15px; }
h2 { letter-spacing:-.035em; font-size:clamp(31px,3vw,45px); line-height:1.18; margin-bottom:0; max-width:620px; }
.section-intro { color:var(--muted); line-height:1.75; max-width:352px; font-size:14px; margin:0; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.product-card { min-height:268px; padding:25px; border:1px solid var(--line); background:#fff; border-radius:14px; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s,border-color .2s; }
.product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#b7ded1; }
.product-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:27px; }
.product-number { color:#a2b0b2; letter-spacing:.12em; font-size:11px; font-weight:850; }
.product-glyph { height:53px; width:59px; background:#e8f7f1; border-radius:11px; position:relative; display:grid; place-items:center; }
.product-glyph::before,.product-glyph::after,.product-glyph i { content:""; display:block; position:absolute; box-sizing:border-box; }
.glyph-desk::before { width:35px; height:6px; background:#378f7d; top:16px; border-radius:2px; }
.glyph-desk::after { height:20px; width:3px; background:#378f7d; top:21px; left:17px; box-shadow:22px 0 #378f7d; }
.glyph-desk i { width:17px; height:13px; border:3px solid #70b8a6; border-bottom:0; top:27px; left:21px; }
.glyph-teacher::before { height:8px; width:37px; background:#398e7d; top:19px; border-radius:2px; }
.glyph-teacher::after { height:16px; width:3px; background:#398e7d; top:25px; left:14px; box-shadow:27px 0 #398e7d; }
.glyph-teacher i { width:12px; height:14px; border-radius:4px 4px 0 0; border:3px solid #70b8a6; border-bottom:0; top:25px; left:23px; }
.glyph-storage::before { width:33px; height:36px; border:3px solid #398e7d; top:9px; left:13px; border-radius:2px; }
.glyph-storage::after { height:32px; width:2px; background:#398e7d; top:11px; left:29px; }
.glyph-storage i { width:4px; height:6px; background:#398e7d; border-radius:1px; top:24px; left:24px; box-shadow:10px 0 #398e7d; }
.glyph-board::before { width:39px; height:28px; border:4px solid #398e7d; top:11px; left:10px; border-radius:2px; }
.glyph-board::after { width:13px; height:2px; background:#398e7d; top:25px; left:23px; transform:rotate(-20deg); }
.glyph-board i { width:4px; height:9px; background:#398e7d; top:37px; left:27px; }
.glyph-screen::before { width:39px; height:27px; border:4px solid #398e7d; border-radius:3px; top:10px; left:10px; }
.glyph-screen::after { width:3px; height:8px; background:#398e7d; top:37px; left:27px; }
.glyph-screen i { width:18px; height:3px; background:#398e7d; top:44px; left:20px; }
.glyph-classroom::before { width:37px; height:34px; border:3px solid #378f7d; top:10px; left:11px; border-radius:2px; }
.glyph-classroom::after { width:23px; height:4px; background:#378f7d; top:17px; left:18px; }
.glyph-classroom i { width:6px; height:7px; background:#86cbbb; top:28px; left:18px; box-shadow:9px 0 #86cbbb,18px 0 #86cbbb; }
.product-card h3 { font-size:18px; line-height:1.3; margin:0 0 10px; letter-spacing:-.025em; }
.product-card p { font-size:13px; color:var(--muted); line-height:1.75; flex:1; margin-bottom:19px; }
.product-card>a { font-size:12px; font-weight:800; color:#188e79; }
.accent-card { background:#f0f8f3; border-color:#d4e8dc; }
.solutions-section { background:var(--cream); }
.solutions-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.solutions-lead h2 { margin-bottom:25px; }
.solutions-lead>p:not(.section-label) { line-height:1.85; font-size:15px; color:var(--muted); }
.text-link { display:inline-block; color:var(--teal); font-weight:800; font-size:14px; margin-top:19px; }
.solution-steps { border-top:1px solid #d8e4de; }
.solution-steps article { display:flex; align-items:flex-start; gap:27px; border-bottom:1px solid #d8e4de; padding:30px 0; }
.solution-steps article>span { color:var(--teal); font-size:12px; font-weight:900; padding-top:6px; }
.solution-steps h3 { font-size:19px; margin:0 0 9px; }
.solution-steps p { font-size:13px; color:var(--muted); line-height:1.65; margin:0; }
.process-section { background:#fff; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.process-step { border-top:2px solid #cde5db; padding:25px 14px 0 0; }
.process-step>span { color:#92b8aa; font-size:29px; font-weight:750; letter-spacing:-.03em; }
.process-step h3 { font-size:18px; margin:22px 0 9px; }
.process-step p { color:var(--muted); font-size:13px; line-height:1.75; }
.inquiry-section { background:var(--navy-900); color:#fff; }
.inquiry-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.inquiry-copy { padding-top:23px; }
.inquiry-copy h2 { font-size:clamp(31px,3.25vw,47px); margin-bottom:22px; }
.inquiry-copy>p:not(.section-label) { color:#b5c9d0; line-height:1.85; font-size:15px; }
.on-dark { color:var(--mint); }
.email-info { display:flex; align-items:center; gap:15px; margin-top:35px; }
.email-icon { width:52px; height:52px; display:grid; place-items:center; background:#23485e; color:var(--mint); font-size:25px; border-radius:11px; }
.email-info div { display:flex; flex-direction:column; gap:8px; }
.email-info small { color:#9fbfc8; font-size:11px; }
.email-info a { font-size:16px; font-weight:750; overflow-wrap:anywhere; }
.important-notice { margin-top:40px; border-left:3px solid var(--mint); padding:5px 0 5px 19px; }
.important-notice strong { display:block; color:#d7ffef; font-size:14px; margin-bottom:9px; }
.important-notice p { margin:0; color:#acc2c8; font-size:12px; line-height:1.85; }
.form-panel { background:#fff; color:var(--ink); padding:35px; border-radius:15px; box-shadow:0 24px 65px rgba(0,0,0,.1); }
.form-title { margin-bottom:25px; }
.form-title h3 { font-size:22px; margin-bottom:6px; }
.form-title p { color:var(--muted); font-size:12px; margin:0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:17px; }
.field label { font-size:12px; font-weight:750; color:#355060; }
.field input,.field select,.field textarea { width:100%; min-width:0; border:1px solid #dce5e6; background:#fbfcfb; border-radius:8px; color:var(--ink); padding:12px 13px; font-size:13px; outline-offset:1px; transition:border-color .15s; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--teal); outline:2px solid #d6f2e8; }
.field input::placeholder,.field textarea::placeholder { color:#9bacb1; }
.field textarea { resize:vertical; min-height:100px; line-height:1.5; }
.form-actions { display:flex; flex-direction:column; gap:10px; }
.form-submit { width:100%; }
.button-copy { background:#eff5f2; border:1px solid #dcece5; color:#285f54; padding:13px 17px; width:100%; }
.button-copy:hover { background:#e4f2eb; }
.form-explainer { font-size:11px; line-height:1.7; color:#69818a; margin:13px 0 0; }
.status-message { margin:12px 0 0; min-height:0; color:#13785e; font-size:12px; font-weight:650; line-height:1.6; }
.status-message:empty { display:none; }
.status-message.is-error { color:#bd4848; }
.preview-details { margin-top:23px; border-top:1px solid var(--line); padding-top:18px; }
.preview-details summary { cursor:pointer; color:#426273; font-size:12px; font-weight:750; }
.preview-details pre { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; border-radius:8px; background:#f3f6f5; padding:15px; font-size:11px; line-height:1.8; color:#3e5f66; max-height:300px; overflow:auto; }
.site-footer { background:#f8faf9; }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:60px; padding:64px 0; }
.footer-brand { font-size:26px; font-weight:850; letter-spacing:.05em; }
.footer-brand span { font-size:11px; color:var(--teal); letter-spacing:.2em; }
.footer-main p { color:var(--muted); line-height:1.8; font-size:13px; max-width:365px; margin:15px 0 0; }
.footer-main>div:not(:first-child) { display:flex; flex-direction:column; align-items:start; gap:13px; }
.footer-main strong { font-size:13px; margin:4px 0 7px; }
.footer-main a:not(.footer-brand) { font-size:13px; color:#536c7a; overflow-wrap:anywhere; }
.footer-main a:hover { color:var(--teal); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #e3eae7; padding:21px 0 28px; font-size:11px; color:#899b9f; line-height:1.5; }
@media (max-width:1100px) { .desktop-nav { gap:13px; } .desktop-nav a { font-size:12px; } .header-actions { gap:10px; } .hero-grid { gap:32px; } .inquiry-layout { gap:35px; } }
@media (max-width:900px) { .container { width:min(100% - 42px,700px); } .header-inner { min-height:72px; flex-wrap:wrap; gap:8px; padding:10px 0; } .desktop-nav { order:3; width:100%; justify-content:center; overflow:auto; padding:5px 0 2px; } .desktop-quote { display:none; } .hero-grid { grid-template-columns:1fr; padding:72px 0; } .hero-visual { max-width:540px; width:100%; margin:auto; } .trust-inner { grid-template-columns:1fr; } .trust-inner>div { padding:14px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); } .section { padding:72px 0; } .section-heading { flex-direction:column; align-items:start; gap:16px; } .section-intro { max-width:610px; } .product-grid { grid-template-columns:repeat(2,1fr); } .solutions-grid,.inquiry-layout { grid-template-columns:1fr; gap:35px; } .process-grid { grid-template-columns:repeat(2,1fr); } .inquiry-copy { padding-top:0; } }
@media (max-width:560px) { .container { width:calc(100% - 32px); } .header-inner { column-gap:5px; } .brand-wordmark strong { font-size:18px; } .brand-symbol { height:31px; width:31px; } .desktop-nav { gap:17px; justify-content:start; } .desktop-nav a { font-size:11px; flex-shrink:0; } .language-button { padding:7px 8px; } .hero-grid { padding:57px 0 65px; } h1 { font-size:38px; } .hero-description { font-size:14px; } .hero-actions { flex-direction:column; align-items:stretch; } .hero-visual { padding:15px 12px; } .classroom-illustration { border-width:7px; } .desk-grid { gap:15px 10px; } .student-desk::after { bottom:-10px; height:4px; } .visual-header { gap:8px; } .visual-badge { font-size:9px; padding:6px; } .product-grid { grid-template-columns:1fr; } .product-card { min-height:233px; } .solution-steps article { gap:18px; } .process-grid { gap:20px; } .process-step h3 { font-size:16px; } .form-panel { padding:22px 17px; } .form-row { grid-template-columns:1fr; gap:0; } .footer-main { grid-template-columns:1fr; gap:33px; padding:50px 0 36px; } .footer-bottom { flex-direction:column; gap:7px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }