/*
 * SAMNET Sentosa Network — one-page corporate website
 * Responsive, no framework, no build dependencies.
 * The original logo artwork supplied by SAMNET is in assets/.
 */
:root {
  --navy: #061a30;
  --deep: #071f38;
  --deep2: #0b2948;
  --blue: #067bd0;
  --blue2: #0cb3e6;
  --green: #53c778;
  --green-deep: #0c9861;
  --ink: #0b223b;
  --body: #5b6d7d;
  --muted: #8ca0b0;
  --surface: #f4f8fb;
  --border: #e5edf3;
  --white: #fff;
  --container: 1200px;
  --radius: 22px;
  --shadow: 0 22px 70px rgba(12, 41, 69, .075);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 102px; }
body { margin:0; color:var(--ink); background:var(--white); font-family: Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
button, select { cursor:pointer; }
img { display:block; max-width:100%; }
svg.icon { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
::selection { background:#b9f3dc; color:#0b2948; }
:focus-visible { outline:3px solid #20b7d4; outline-offset:4px; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.container { width:min(calc(100% - 64px), var(--container)); margin-inline:auto; }
.skip-link { position:fixed; z-index:999; top:-60px; left:20px; background:white; color:#06283d; padding:12px 18px; font-weight:700; border-radius:8px; }
.skip-link:focus { top:12px; }
.button { min-height:54px; padding:0 25px; border:1px solid transparent; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; gap:13px; white-space:nowrap; font-size:14px; line-height:1; font-weight:750; letter-spacing:-.01em; transition:transform .23s, background .23s, box-shadow .23s, border-color .23s; cursor:pointer; }
.button:hover { transform:translateY(-3px); }
.button .icon { width:17px; height:17px; }
.button-primary { background:#067dc7; color:white; box-shadow:0 9px 21px rgba(5, 105, 186, .15); }
.button-primary:hover { background:#0564aa; box-shadow:0 13px 30px rgba(5, 105, 186, .23); }
.button-small { min-height:44px; padding:0 19px; border-radius:9px; font-size:12px; }
.button-accent { background:linear-gradient(110deg, #62d88e, #38caac); color:#073a38; box-shadow:0 11px 38px rgba(58,219,149,.2); }
.button-accent:hover { box-shadow:0 17px 45px rgba(58,219,149,.32); }
.button-ghost { background:rgba(255,255,255,.055); border-color:rgba(212,238,255,.25); color:white; }
.button-ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(212,238,255,.55); }
/* Solid-color fallback for browsers / renderers without gradient text support. */
.text-gradient { color:#0b8cb7; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .text-gradient { background:linear-gradient(115deg, #057ac6, #0a9cc2 52%, #1fb777 100%); color:transparent; background-clip:text; -webkit-background-clip:text; }
}

/* Header */
.site-header { height:94px; position:sticky; top:0; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); z-index:70; box-shadow:0 1px 0 #e8edf2; }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { flex:0 0 236px; display:block; }
.brand img { width:236px; height:auto; }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:28px; flex:1; }
.desktop-nav .nav-link { position:relative; padding:9px 0; color:#4c6172; font-size:12px; font-weight:700; transition:color .2s; }
.desktop-nav .nav-link::after { content:''; width:0; height:2px; background:#0786d1; position:absolute; bottom:0; left:0; border-radius:2px; transition:width .2s; }
.desktop-nav .nav-link:hover, .desktop-nav .nav-link.active { color:#0575bc; }
.desktop-nav .nav-link:hover::after, .desktop-nav .nav-link.active::after { width:100%; }
.header-actions { display:flex; align-items:center; }
.menu-toggle { display:none; height:44px; width:44px; border-radius:10px; background:#f2f8fc; color:var(--ink); align-items:center; justify-content:center; border:1px solid #e0edf6; }
.menu-toggle .close-icon { display:none; }
.menu-toggle[aria-expanded="true"] .menu-icon { display:none; }
.menu-toggle[aria-expanded="true"] .close-icon { display:block; }
.mobile-menu { display:none; }

/* Hero */
.hero { position:relative; overflow:hidden; padding:93px 0 0; isolation:isolate; background:radial-gradient(ellipse at 87% 47%, #0d3553 0,transparent 46%), linear-gradient(114deg, #06172b 8%, #071f36 56%, #062f41 100%); color:white; }
.hero::before { content:''; inset:0; z-index:-1; position:absolute; opacity:.4; background:linear-gradient(100deg,transparent 30%,rgba(26,106,145,.16) 100%); }
.hero::after { content:''; z-index:-1; position:absolute; height:660px; width:660px; border:1px solid rgba(68,180,208,.09); border-radius:50%; right:-205px; top:-370px; box-shadow:0 0 0 85px rgba(58,183,203,.023),0 0 0 178px rgba(58,183,203,.018),0 0 0 274px rgba(58,183,203,.014); }
.hero-glow { position:absolute; z-index:-1; border-radius:100%; pointer-events:none; filter:blur(65px); }
.hero-glow-a { background:#0875ba; opacity:.16; width:410px; height:360px; top:18%; left:-240px; }
.hero-glow-b { background:#12a48b; opacity:.10; width:400px; height:250px; right:5%; bottom:0; }
.hero-dotfield { position:absolute; right:0; bottom:0; width:42%; height:250px; opacity:.13; background-image:radial-gradient(#c4f6eb 1px,transparent 1px); background-size:17px 17px; mask-image:linear-gradient(to left,#000,transparent); }
.hero-layout { min-height:492px; display:grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap:30px; align-items:center; }
.hero-content { position:relative; z-index:5; padding-bottom:43px; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:800; letter-spacing:.14em; white-space:nowrap; }
.eyebrow-on-dark { color:#9fc5d2; }
.eyebrow-dot { width:8px; height:8px; border-radius:50%; flex:none; background:#4dd99b; box-shadow:0 0 0 5px rgba(77,217,155,.12); }
.eyebrow-line { display:inline-block; width:28px; height:1px; background:#456b80; margin-inline:4px; }
h1, h2, h3, p { margin-top:0; }
.hero h1 { max-width:625px; font-size:clamp(44px,4.4vw,65px); font-weight:850; letter-spacing:-.062em; line-height:1.115; margin:29px 0 25px; }
.headline-highlight { color:#64dfa8; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .headline-highlight { background:linear-gradient(104deg, #51d98e 12%, #55dece 80%,#80def9 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.hero-description { max-width:510px; font-size:15px; line-height:1.95; color:#b8cbda; margin-bottom:34px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-location { display:flex; gap:10px; align-items:center; margin-top:38px; font-size:12px; color:#a8c1d0; }
.hero-location strong { color:#d9f7ef; font-weight:700; }
.location-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:#5cdeac; background:rgba(58,198,150,.12); }
.location-icon .icon { width:15px; height:15px; }
.hero-visual { position:relative; height:520px; min-width:0; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.visual-aura { position:absolute; z-index:-2; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(17,194,184,.19), transparent 65%); filter:blur(8px); }
.signal-orbit { position:absolute; border-radius:50%; border:1px solid rgba(53,188,201,.14); }
.orbit-outer { width:500px; height:500px; }
.orbit-inner { width:430px; height:430px; border:1px dashed rgba(100,212,216,.15); animation:spin 80s linear infinite; }
.orbital-dot { width:9px; height:9px; border-radius:50%; background:#65e5bb; position:absolute; box-shadow:0 0 24px #36cbd1; }
.orbital-dot-one { top:48px; right:110px; }
.orbital-dot-two { bottom:44px; left:65px; width:5px; height:5px; background:#47b9e7; }
.network-panel { width:min(100%,488px); min-height:424px; border:1px solid rgba(141,204,221,.25); border-radius:22px; background:linear-gradient(148deg,rgba(26,67,89,.96),rgba(8,38,62,.89) 72%,rgba(10,46,67,.9)); box-shadow:0 25px 75px rgba(1,13,23,.3),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(12px); position:relative; overflow:hidden; transform:perspective(900px) rotateY(-5deg) rotateX(2deg); }
.network-panel::before { content:''; position:absolute; width:190px; height:190px; left:-80px; top:-100px; border-radius:100%; filter:blur(60px); background:#15a8c5; opacity:.15; }
.panel-top { height:57px; border-bottom:1px solid rgba(209,245,255,.115); display:flex; align-items:center; justify-content:space-between; padding:0 23px; }
.panel-top-brand { color:#d9f7ff; display:flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:.13em; }
.panel-brandmark { display:block; border-radius:5px; width:20px; height:20px; background:linear-gradient(140deg,#00a6ee,#59de93); box-shadow:0 0 18px rgba(60,202,178,.3); position:relative; }
.panel-brandmark::after { content:''; position:absolute; width:9px; height:9px; left:6px; top:5px; border:2px solid rgba(255,255,255,.95); border-radius:50%; }
.panel-online { color:#8febc0; display:flex; align-items:center; gap:7px; font-size:9px; font-weight:800; letter-spacing:.08em; }
.panel-online span { width:7px; height:7px; border-radius:50%; background:#50dc92; box-shadow:0 0 0 4px rgba(80,220,146,.1); }
.network-map { height:324px; position:relative; }
.network-lines { position:absolute; width:100%; height:100%; inset:0; overflow:visible; }
.network-lines path { fill:none; stroke:#2c9dba; stroke-width:1.65; stroke-dasharray:7 7; opacity:.75; }
.network-lines circle { fill:none; stroke:#3289a2; stroke-width:1; opacity:.17; }
.main-node { position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); width:166px; height:166px; border:1px solid rgba(81,207,224,.55); border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(24,117,151,.48),rgba(6,37,59,.96) 72%); box-shadow:0 0 0 11px rgba(43,178,191,.055),0 0 0 23px rgba(52,162,194,.055),0 0 52px rgba(15,172,189,.2),inset 0 0 18px rgba(50,191,192,.14); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.main-node-sheen { width:112px; height:104px; display:grid; place-items:center; }
.main-node img { max-height:104px; width:auto; max-width:104px; filter:drop-shadow(0 9px 13px rgba(0,0,0,.25)); }
.main-node>span { color:#9ad5dc; font-size:8px; letter-spacing:.17em; font-weight:800; }
.satellite-node { position:absolute; width:71px; display:flex; flex-direction:column; align-items:center; gap:7px; color:#cfe9f3; font-size:10px; font-weight:700; }
.satellite-icon { width:55px; height:55px; display:grid; place-items:center; background:#104a67; border:1px solid #26677c; color:#5be4c5; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.satellite-icon .icon { width:24px; height:24px; }
.node-home { left:11%; top:11%; }.node-business { right:9%; top:11%; }.node-office { left:11%; bottom:9%; }.node-devices { right:9%; bottom:9%; }
.panel-bottom { height:42px; padding:0 23px; background:rgba(0,12,28,.19); border-top:1px solid rgba(209,245,255,.09); display:flex; align-items:center; justify-content:space-between; gap:10px; color:#91b9ca; font-size:9px; font-weight:750; letter-spacing:.095em; }
.panel-bottom .icon { width:16px; height:16px; color:#65dabd; }
.bottom-bars { display:flex; align-items:flex-end; gap:3px; height:12px; }
.bottom-bars i { display:block; width:3px; height:5px; border-radius:2px; background:#47ccab; }
.bottom-bars i:nth-child(2) { height:8px; }.bottom-bars i:nth-child(3) { height:11px; }.bottom-bars i:nth-child(4) { height:9px; }
.float-badge { position:absolute; display:flex; gap:10px; align-items:center; z-index:5; border:1px solid rgba(212,235,244,.18); background:rgba(250,254,255,.98); color:#0b2a41; border-radius:14px; box-shadow:0 15px 35px rgba(1,23,37,.24); padding:12px 16px; font-size:12px; font-weight:800; animation:float 6s ease-in-out infinite; }
.float-badge small { display:block; margin-top:5px; font-size:10px; color:#8194a2; font-weight:550; }
.float-badge-top { top:21px; right:-21px; }.float-badge-bottom { bottom:17px; left:-29px; animation-delay:-3s; }
.float-badge-icon,.float-status-icon { width:34px; height:34px; border-radius:10px; background:#e4f6fc; color:#0d8fc3; display:grid; place-items:center; }
.float-status-icon { background:#e0f9ed; color:#19a96c; }
.float-status-icon .icon { width:19px; height:19px; }
.hero-bottom { display:flex; align-items:center; gap:30px; height:76px; border-top:1px solid rgba(199,236,249,.13); color:#9fbdcd; font-weight:700; font-size:11px; letter-spacing:.02em; }
.hero-bottom>div { display:flex; align-items:center; gap:9px; }.hero-bottom .icon { color:#62dbab; width:17px; height:17px; }
.hero-bottom-separator { background:rgba(203,231,240,.17); width:1px; height:16px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-11px); } }

/* Shared section type */
.section { padding:116px 0; }
.section-kicker { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:850; letter-spacing:.16em; color:#0f94b7; margin-bottom:20px; }
.section-kicker>span { width:22px; height:3px; border-radius:5px; background:linear-gradient(90deg,#06a1d8,#50d68b); }
.section-heading { max-width:720px; margin:0 auto 50px; }
.section-heading.centered { text-align:center; }
.section-heading h2, .advantage h2, .location-copy h2, .faq-intro h2 { font-size:clamp(32px,3.55vw,48px); font-weight:850; letter-spacing:-.055em; line-height:1.18; margin-bottom:20px; }
.section-heading p, .advantage-left>p, .location-copy>p, .faq-intro>p { color:var(--body); font-size:14px; line-height:2; }
.section-heading p { max-width:605px; margin-inline:auto; }

/* Services */
.services { background:linear-gradient(180deg,#f6fafc 0%, #fff 100%); }
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px; }
.service-card { position:relative; display:flex; flex-direction:column; padding:29px 28px 27px; border:1px solid #e7eef4; border-radius:20px; background:#fff; box-shadow:0 16px 38px rgba(19,57,83,.035); transition:transform .25s,box-shadow .25s,border-color .25s; min-width:0; overflow:hidden; }
.service-card:hover { transform:translateY(-7px); border-color:#b7deef; box-shadow:0 24px 46px rgba(19,57,83,.09); }
.featured-service { border-color:#bfe9dc; box-shadow:0 18px 42px rgba(19,105,89,.065); }
.featured-service::before { content:''; width:120%; height:4px; background:linear-gradient(90deg,#0e97d7,#3ad895); position:absolute; left:-10%; top:0; }
.service-feature-label { position:absolute; right:0; top:0; font-size:8px; letter-spacing:.10em; font-weight:850; color:#076547; background:#dbf8e9; padding:9px 11px; border-radius:0 0 0 9px; }
.service-illustration { height:140px; position:relative; border-radius:13px; margin-bottom:30px; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.illus-home { background:linear-gradient(135deg,#e6f5fd,#f6fbff); color:#098ecb; }
.illus-shop { background:linear-gradient(135deg,#defaf0,#f3fffa); color:#13a77c; }
.illus-office { background:linear-gradient(135deg,#e6f2ff,#edfaff); color:#3763ce; }
.service-illustration::before,.service-illustration::after { content:''; position:absolute; border:1px solid currentColor; opacity:.14; border-radius:50%; width:160px; height:160px; }
.service-illustration::after { width:210px; height:210px; }
.illus-circle { position:absolute; width:97px; height:97px; border-radius:50%; background:#fff; box-shadow:0 10px 25px rgba(49,128,156,.12); }
.service-illustration>.icon { position:relative; z-index:1; width:52px; height:52px; stroke-width:1.4; }
.service-mini-orb { position:absolute; top:28px; right:26%; font-size:10px; color:currentColor; opacity:.65; }
.service-tag { font-size:10px; letter-spacing:.12em; font-weight:850; color:#1499bb; margin-bottom:12px; }
.service-card h3 { font-size:23px; letter-spacing:-.045em; margin-bottom:13px; }
.service-card p { font-size:12.5px; line-height:1.95; color:var(--body); min-height:73px; margin-bottom:16px; }
.service-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:29px; }
.service-chips span { font-size:9px; color:#506c7c; font-weight:700; background:#f1f6f9; border:1px solid #e9eff3; padding:7px 9px; border-radius:6px; }
.service-link { display:flex; justify-content:space-between; align-items:center; padding-top:22px; border-top:1px solid #e9eff3; margin-top:auto; font-size:12px; color:#087dbb; font-weight:800; }
.service-link .icon { width:17px; height:17px; transition:transform .2s; }
.service-link:hover .icon { transform:translate(3px,-3px); }
.service-note { text-align:center; color:#7d8c98; font-size:11px; line-height:1.7; margin:27px auto 0; display:flex; justify-content:center; align-items:center; gap:8px; }
.service-note .icon { color:#1386ae; width:15px; height:15px; }

/* Advantages */
.advantage { background:white; padding-top:98px; padding-bottom:126px; }
.advantage-layout { display:grid; grid-template-columns:.87fr 1.13fr; gap:80px; align-items:center; }
.advantage-left { align-self:center; }
.advantage h2 { max-width:490px; }
.advantage-left>p { max-width:440px; margin-bottom:27px; }
.text-link,.inline-subtle-link { font-size:13px; font-weight:800; color:#087eba; display:inline-flex; align-items:center; gap:10px; }
.text-link .icon,.inline-subtle-link .icon { width:17px; height:17px; transition:transform .2s; }
.text-link:hover .icon,.inline-subtle-link:hover .icon { transform:translateX(5px); }
.brand-quote { margin-top:50px; padding-left:18px; position:relative; }
.brand-quote-line { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:4px; background:linear-gradient(#009ae0,#56d67e); }
.brand-quote p { font-size:17px; font-weight:800; letter-spacing:-.03em; color:#0f3a55; margin-bottom:9px; font-style:italic; }
.brand-quote span { font-size:9px; letter-spacing:.14em; font-weight:800; color:#8ba1b2; }
.advantage-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.advantage-card { position:relative; min-height:245px; border-radius:17px; padding:26px 23px; background:#f4f8fb; border:1px solid #eaf0f4; overflow:hidden; transition:transform .25s; }
.advantage-card:hover { transform:translateY(-5px); }
.advantage-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:#e0f2fa; color:#097ebc; margin-bottom:23px; }
.advantage-icon .icon { width:24px; height:24px; }
.advantage-card h3 { font-size:16px; font-weight:850; letter-spacing:-.03em; margin-bottom:9px; }
.advantage-card p { font-size:11px; line-height:1.85; color:#697b8b; margin:0; max-width:250px; }
.advantage-number { position:absolute; right:18px; top:22px; font-size:12px; color:#c7d8e2; font-weight:800; }
.advantage-blue { background:linear-gradient(145deg,#087abe,#066c9d); border-color:#0c86c4; color:white; }
.advantage-blue .advantage-icon { background:rgba(255,255,255,.18); color:white; }.advantage-blue p { color:#d0eefa; }.advantage-blue .advantage-number { color:#5bb5dd; }
.advantage-green { background:linear-gradient(145deg,#effbf3,#e3f9f0); border-color:#d7f1e1; }
.advantage-green .advantage-icon { background:white; color:#15a879; }

/* Location */
.location-section { background:#f5f9fc; padding:105px 0; }
.location-layout { display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:75px; }
.location-visual { height:475px; border-radius:21px; overflow:hidden; position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 45%, #0d4867 0%,#082e4d 48%, #09213b 100%); box-shadow:0 25px 65px rgba(4,40,68,.17); }
.map-grid { position:absolute; inset:0; opacity:.19; background-image:linear-gradient(rgba(131,203,226,.23) 1px,transparent 1px),linear-gradient(90deg,rgba(131,203,226,.23) 1px,transparent 1px); background-size:37px 37px; transform:rotate(-11deg) scale(1.3); }
.map-glow { position:absolute; width:340px; height:340px; border-radius:50%; left:105px; top:55px; background:radial-gradient(circle,rgba(18,183,179,.16),transparent 70%); }
.map-path { position:absolute; width:100%; height:100%; }
.map-path path { fill:none; stroke:#248caa; stroke-width:2; opacity:.52; }
.map-path path:nth-child(2) { stroke-dasharray:9 8; opacity:.3; }.map-path path:nth-child(3) { stroke:#21a5a3; opacity:.19; stroke-width:3; }
.map-coordinate { position:absolute; left:27px; top:23px; color:#8bb5cb; font-size:9px; letter-spacing:.17em; font-weight:800; }
.map-label { position:absolute; display:flex; align-items:center; gap:7px; color:#9cc6d1; font-size:9px; letter-spacing:.12em; font-weight:850; }
.map-label span { background:#64cfc6; height:5px; width:5px; border-radius:50%; }.map-label-a { top:115px; left:65px; }.map-label-b { bottom:93px; right:57px; }
.map-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; flex-direction:column; gap:14px; }
.map-core-circle { display:grid; place-items:center; border-radius:50%; width:94px; height:94px; background:linear-gradient(145deg,#0dbbc4,#42da94); color:white; border:7px solid #124c62; box-shadow:0 0 0 16px rgba(54,216,189,.10),0 0 0 42px rgba(36,167,185,.075),0 0 0 74px rgba(36,167,185,.035),0 0 50px rgba(28,207,180,.18); }
.map-core-circle .icon { width:42px; height:42px; stroke-width:1.6; }
.map-core-text { padding:13px 24px; background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); text-align:center; }
.map-core-text strong { display:block; font-size:15px; font-weight:900; letter-spacing:.08em; color:#096399; }.map-core-text span { display:block; font-size:9px; font-weight:850; letter-spacing:.16em; color:#6a8797; margin-top:4px; }
.map-corner { position:absolute; bottom:23px; left:27px; font-size:9px; line-height:2; letter-spacing:.15em; color:#85adbc; }.map-corner strong { font-size:15px; color:#c7e8ec; letter-spacing:.04em; }
.location-copy h2 { margin-bottom:19px; }.location-copy>p { margin-bottom:28px; }
.address-card { display:flex; gap:16px; padding:19px 21px; margin-bottom:27px; background:white; border:1px solid #e6edf2; border-radius:13px; }
.address-card-icon { display:grid; place-items:center; border-radius:11px; width:42px; height:42px; background:#e7f6fb; color:#0e93bf; flex-shrink:0; }.address-card-icon .icon { width:21px; height:21px; }
.address-caption { display:block; font-size:9px; font-weight:850; letter-spacing:.15em; color:#179abd; margin:2px 0 9px; }
.address-card address { font-size:12px; color:#40586a; font-style:normal; line-height:1.9; }
.location-buttons { display:flex; gap:19px; align-items:center; flex-wrap:wrap; }.inline-subtle-link { font-size:12px; }

/* FAQ */
.faq-section { background:#fff; padding:106px 0 113px; }
.faq-layout { display:grid; grid-template-columns:.79fr 1.21fr; gap:100px; align-items:start; }
.faq-intro h2 { max-width:390px; }.faq-intro>p { max-width:360px; }
.faq-email { display:inline-flex; align-items:center; gap:11px; font-size:13px; font-weight:800; color:#0c8ab4; margin-top:17px; word-break:break-word; }.faq-email .icon { width:17px; height:17px; }.faq-email .icon:last-child { width:14px; }
.faq-list { border-top:1px solid #e4edf3; }
.faq-item { border-bottom:1px solid #e4edf3; }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:24px; cursor:pointer; padding:23px 0; font-size:13px; color:#183448; font-weight:800; line-height:1.65; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-indicator { position:relative; width:30px; height:30px; border:1px solid #dfebf1; background:#f5fafc; border-radius:8px; flex-shrink:0; display:grid; place-items:center; transition:background .2s,border-color .2s; }
.faq-indicator::before,.faq-indicator::after { content:''; display:block; position:absolute; width:11px; height:2px; border-radius:2px; background:#1686b6; }.faq-indicator::after { transform:rotate(90deg); transition:transform .2s; }
.faq-item[open] summary { color:#0878ae; padding-bottom:13px; }.faq-item[open] .faq-indicator { background:#e5f8f2; border-color:#cbefe1; }.faq-item[open] .faq-indicator::after { transform:rotate(0); }
.faq-item p { max-width:630px; color:#637788; line-height:1.9; padding:0 57px 22px 0; font-size:12px; margin:0; }
.faq-item p a { color:#097cad; font-weight:750; text-decoration:underline; text-underline-offset:3px; }

/* Contact */
.contact-section { position:relative; background:linear-gradient(116deg,#071c33 15%,#063147 100%); color:white; padding:109px 0; overflow:hidden; isolation:isolate; }
.contact-section::before { content:''; z-index:-1; position:absolute; width:650px; height:650px; border-radius:50%; top:-390px; right:-170px; border:1px solid rgba(75,211,183,.15); box-shadow:0 0 0 80px rgba(75,211,183,.035),0 0 0 190px rgba(75,211,183,.025); }
.contact-section::after { content:''; z-index:-1; position:absolute; width:500px; height:500px; border-radius:50%; bottom:-410px; left:-190px; background:#1072a3; filter:blur(100px); opacity:.25; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.section-kicker-light { color:#9bdfd2; }.section-kicker-light>span { background:#4dde9e; }
.contact-copy h2 { max-width:515px; font-size:clamp(38px,3.7vw,52px); line-height:1.16; letter-spacing:-.06em; font-weight:850; margin-bottom:21px; }.contact-copy h2 span { color:#65dfab; }
.contact-copy>p { color:#b6cbd7; font-size:14px; line-height:2; max-width:455px; margin-bottom:37px; }
.contact-email-block { display:flex; align-items:center; gap:14px; max-width:400px; border:1px solid rgba(180,238,235,.2); background:rgba(255,255,255,.055); border-radius:14px; padding:17px; transition:background .2s; }.contact-email-block:hover { background:rgba(255,255,255,.12); }
.contact-email-icon { width:45px; height:45px; border-radius:10px; display:grid; place-items:center; color:#80eac6; background:rgba(100,215,178,.13); flex-shrink:0; }
.contact-email-block small { font-size:9px; color:#8caeba; font-weight:800; letter-spacing:.13em; display:block; margin-bottom:8px; }.contact-email-block strong { font-size:15px; font-weight:750; color:white; overflow-wrap:anywhere; }
.contact-email-arrow { margin-left:auto; width:17px; height:17px; color:#60d8a8; }
.contact-decoration { margin-top:52px; display:flex; align-items:center; gap:9px; font-size:9px; letter-spacing:.17em; font-weight:800; color:#719aaa; }.contact-decor-dot { width:7px; height:7px; border-radius:50%; background:#4fdd93; }
.contact-form { min-width:0; padding:35px; border-radius:19px; border:1px solid #e5edf3; box-shadow:0 20px 75px rgba(1,19,35,.28); background:#fff; color:var(--ink); }
.form-heading { display:flex; align-items:center; gap:13px; padding-bottom:27px; margin-bottom:24px; border-bottom:1px solid #e8eef2; }.form-heading-icon { width:46px; height:46px; border-radius:12px; background:#e5f5fd; display:grid; place-items:center; color:#098dbe; }.form-heading h3 { font-size:18px; letter-spacing:-.045em; margin:0 0 7px; }.form-heading p { font-size:11px; color:#8796a3; margin:0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.form-field { margin-bottom:17px; min-width:0; }
.form-field label { display:block; font-size:11px; font-weight:800; margin-bottom:10px; }.form-field label span { color:#e25b67; }
.form-field input,.form-field select,.form-field textarea { display:block; width:100%; background:#f8fafc; border:1px solid #e2eaf0; border-radius:9px; outline:0; font-size:12px; color:var(--ink); padding:12px 14px; min-height:46px; transition:background .2s, border-color .2s, box-shadow .2s; }
.form-field textarea { resize:vertical; min-height:116px; }
.form-field select:invalid { color:#8d9aa6; }.form-field select option { color:var(--ink); }
.form-field input::placeholder,.form-field textarea::placeholder { color:#9aa9b3; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { background:white; border-color:#31b5c7; box-shadow:0 0 0 3px rgba(47,184,199,.12); }
.form-submit { width:100%; margin-top:4px; border:0; }
.form-note { color:#8b9ba7; display:flex; gap:7px; align-items:flex-start; font-size:10px; line-height:1.7; margin:15px 0 0; }.form-note .icon { width:14px; height:14px; color:#15987f; margin-top:1px; }

/* Footer */
.footer { background:#05182b; color:#9eb5c4; }
.footer-top { display:grid; grid-template-columns:1.65fr .7fr 1fr 1.2fr; gap:52px; padding:75px 0 64px; }
.footer-logo { display:inline-flex; padding:5px 10px; background:white; border-radius:9px; margin-bottom:20px; }
.footer-logo img { width:227px; height:auto; }
.footer-brand>p { font-size:12px; max-width:330px; line-height:1.9; margin-bottom:25px; }
.footer-tagline { display:flex; align-items:center; gap:8px; font-size:8px; letter-spacing:.1em; font-weight:800; color:#74aebd; }
.footer-tagline>span { width:6px; height:6px; border-radius:100%; background:#4bd5a1; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.footer-column h3 { font-size:12px; color:white; margin:7px 0 9px; font-weight:850; }.footer-column>a { display:inline-flex; gap:7px; align-items:center; color:#9eb5c4; font-size:11px; line-height:1.55; transition:color .2s; }.footer-column>a:hover { color:#58ddad; }
.footer-column p { font-size:11px; line-height:1.95; margin:0; }.footer-address .icon { width:14px; height:14px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid rgba(213,244,251,.1); padding:23px 0 27px; font-size:10px; }
.footer-bottom a { display:flex; gap:10px; align-items:center; font-weight:750; color:#a7e6d0; }.footer-bottom a span { font-size:18px; }

/* Motion: only active when JS can observe; no blank content when JS disabled */
.will-reveal { opacity:0; transform:translateY(23px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.will-reveal.is-visible { opacity:1; transform:translateY(0); }
.services-grid [data-reveal]:nth-child(2),.advantage-grid [data-reveal]:nth-child(2) { transition-delay:.1s; }
.services-grid [data-reveal]:nth-child(3),.advantage-grid [data-reveal]:nth-child(3) { transition-delay:.17s; }
.advantage-grid [data-reveal]:nth-child(4) { transition-delay:.24s; }

@media (max-width:1160px) {
  .container { width:min(calc(100% - 50px),var(--container)); }
  .desktop-nav { gap:18px; }.brand { flex-basis:206px; }.brand img { width:206px; }.header-actions .button { padding:0 14px; }
  .hero h1 { font-size:clamp(44px,4.65vw,59px); }.hero-visual { height:480px; }.network-panel { width:440px; min-height:410px; }.network-map { height:310px; }.float-badge-top { right:-10px; }.float-badge-bottom { left:-10px; }
  .advantage-layout { gap:45px; }.location-layout { gap:50px; }.faq-layout { gap:60px; }.contact-layout { gap:50px; }.footer-top { gap:25px; }
}
@media (max-width:900px) {
  html { scroll-padding-top:85px; }
  .site-header { height:78px; }.brand { flex-basis:auto; }.brand img { width:215px; }
  .desktop-nav { display:none; }.menu-toggle { display:flex; }.header-actions { gap:10px; }
  .mobile-menu { position:absolute; left:0; right:0; top:100%; background:#fff; box-shadow:0 15px 25px rgba(4,28,48,.13); border-top:1px solid #ebf1f5; flex-direction:column; padding:15px max(25px,calc((100vw - 850px)/2)); max-height:calc(100dvh - 78px); overflow-y:auto; }
  .mobile-menu.is-open { display:flex; }.mobile-menu a { padding:14px 7px; border-bottom:1px solid #f0f3f6; font-size:14px; font-weight:750; }.mobile-menu .mobile-menu-cta { display:flex; gap:10px; align-items:center; color:#0489c3; border:0; }
  .hero { padding-top:55px; }.hero-layout { grid-template-columns:1fr; gap:0; }.hero-content { padding-bottom:5px; }.hero h1 { font-size:clamp(45px,6.9vw,70px); max-width:780px; }.hero-description { max-width:670px; }.hero-visual { margin:0 auto; width:min(100%,610px); height:500px; }.network-panel { width:min(100%,490px); }.hero-bottom { justify-content:center; }
  .section { padding:83px 0; }.advantage-layout { grid-template-columns:1fr; gap:36px; }.advantage-left>p { max-width:650px; }.brand-quote { margin-top:35px; }.advantage-grid { max-width:760px; }
  .location-layout { grid-template-columns:1fr; gap:45px; }.location-visual { height:430px; }.location-copy>p { max-width:690px; }
  .faq-layout { grid-template-columns:1fr; gap:27px; }.faq-intro h2 { max-width:none; }.faq-intro>p { max-width:600px; }.faq-email { margin-top:1px; }
  .contact-layout { grid-template-columns:1fr; gap:40px; }.contact-copy h2 { max-width:680px; }.contact-copy>p { max-width:630px; }.contact-decoration { margin-top:27px; }.contact-form { max-width:700px; }
  .footer-top { grid-template-columns:1.4fr 1fr 1fr; gap:38px; }.footer-brand { grid-column:1 / -1; }
}
@media (max-width:700px) {
  .container { width:calc(100% - 36px); }
  .header-cta { display:none; }.brand img { width:207px; }.site-header { height:73px; }
  .hero { padding-top:46px; }.eyebrow { font-size:8px; gap:8px; letter-spacing:.105em; }.eyebrow-line { width:15px; }
  .hero h1 { font-size:clamp(42px,8.8vw,59px); margin-top:23px; margin-bottom:20px; }
  .hero-description { font-size:13px; line-height:1.85; margin-bottom:27px; }.hero-location { margin-top:27px; font-size:10px; }
  .hero-visual { height:400px; width:100%; margin-top:25px; }.network-panel { width:min(100%,428px); min-height:332px; transform:none; border-radius:16px; }
  .panel-top { height:47px; padding:0 17px; }.network-map { height:247px; }.panel-bottom { height:38px; padding:0 17px; font-size:7px; }.panel-top-brand { font-size:8px; }.panel-online { font-size:7px; }
  .main-node { width:127px; height:127px; }.main-node-sheen { width:79px; height:76px; }.main-node img { max-height:77px; max-width:77px; }.main-node>span { font-size:6px; }
  .satellite-node { width:59px; font-size:9px; gap:5px; }.satellite-icon { width:42px; height:42px; border-radius:12px; }.satellite-icon .icon { width:19px; height:19px; }
  .node-home,.node-office { left:10%; }.node-business,.node-devices { right:8%; }
  .float-badge { padding:8px 10px; font-size:9px; border-radius:10px; gap:7px; }.float-badge small { font-size:8px; margin-top:3px; }.float-badge-icon,.float-status-icon { width:28px; height:28px; border-radius:8px; }.float-badge .icon { width:16px; height:16px; }.float-badge-top { right:-3px; top:7px; }.float-badge-bottom { left:-4px; bottom:0; }
  .signal-orbit.orbit-outer { width:380px; height:380px; }.orbit-inner { width:305px; height:305px; }
  .hero-bottom { height:auto; padding-block:17px; flex-wrap:wrap; gap:10px 13px; justify-content:flex-start; font-size:9px; }.hero-bottom .icon { width:14px; height:14px; }.hero-bottom-separator { display:none; }.hero-bottom>div { margin-right:10px; }
  .section { padding:75px 0; }.section-heading { margin-bottom:33px; }.section-heading h2,.advantage h2,.location-copy h2,.faq-intro h2 { font-size:clamp(32px,6vw,40px); }.section-heading p,.advantage-left>p,.location-copy>p,.faq-intro>p { font-size:12.5px; line-height:1.85; }
  .services-grid { grid-template-columns:1fr; gap:16px; }.service-card { padding:23px; }.service-illustration { height:125px; margin-bottom:22px; }.service-card p { min-height:0; }.service-note { align-items:flex-start; text-align:left; font-size:10px; }
  .advantage-layout { gap:32px; }.advantage-grid { gap:11px; }.advantage-card { padding:20px 16px; min-height:230px; }.advantage-card h3 { font-size:13px; }.advantage-card p { font-size:10px; }.advantage-icon { margin-bottom:17px; }.brand-quote p { font-size:14px; }
  .location-visual { height:365px; }.map-core-circle { width:75px; height:75px; }.map-core-circle .icon { width:32px; height:32px; }.map-coordinate { font-size:8px; }.map-label-a { left:30px; }.map-label-b { right:17px; }.map-corner { left:22px; }.location-layout { gap:35px; }
  .address-card address { font-size:11px; }.location-buttons { gap:15px; }
  .faq-item summary { font-size:12px; gap:13px; padding:19px 0; }.faq-item p { font-size:11px; padding-right:30px; }.faq-indicator { width:28px; height:28px; }
  .contact-section { padding:76px 0; }.contact-copy h2 { font-size:clamp(36px,7vw,46px); }.contact-copy>p { font-size:12.5px; }.contact-form { padding:23px; }.form-row { grid-template-columns:1fr; gap:0; }.form-note { font-size:9px; }
  .footer-top { grid-template-columns:1fr 1fr; padding:56px 0 44px; gap:35px 18px; }.footer-brand { grid-column:1/-1; }.footer-address { grid-column:1/-1; }.footer-bottom { font-size:9px; line-height:1.8; }
}
@media (max-width:385px) {
  .container { width:calc(100% - 30px); }.brand img { width:176px; }
  .hero h1 { font-size:40px; }.hero-actions { align-items:stretch; flex-direction:column; }.hero-actions .button { width:100%; }.eyebrow { font-size:7px; }
  .network-panel { min-height:310px; }.network-map { height:227px; }.hero-visual { height:375px; }.float-badge-top { top:0; }.float-badge-bottom { bottom:0; }
  .advantage-grid { grid-template-columns:1fr; }.advantage-card { min-height:0; }.advantage-card p { max-width:none; }.footer-bottom { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .will-reveal { opacity:1; transform:none; }
}
