:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f4f1e9; color: #173936; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-shell {
  --bg: #f4f1e9;
  --surface: #fffdf7;
  --ink: #173936;
  --muted: #62726f;
  --accent: #e8663d;
  --accent-ink: #fff;
  --line: rgba(23,57,54,.15);
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  transition: background .35s ease, color .35s ease;
}
.site-shell[data-theme="technology"] { --bg:#06131a; --surface:#0c2029; --ink:#effdff; --muted:#8ea7ad; --accent:#47e4d1; --accent-ink:#03211f; --line:rgba(136,226,218,.18); color-scheme:dark; }
.site-shell[data-theme="corporate"] { --bg:#f4f7fb; --surface:#fff; --ink:#102b55; --muted:#60718a; --accent:#246bfe; --accent-ink:#fff; --line:rgba(16,43,85,.14); }

.site-header { min-height:112px; padding:13px max(5vw,32px); display:flex; align-items:center; gap:48px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-right:auto; }
.brand > span:last-child { display:flex; flex-direction:column; }
.brand strong { font-size:18px; letter-spacing:.06em; }
.brand small { margin-top:2px; color:var(--muted); font-size:10px; }
.company-logo { width:156px; aspect-ratio:785/399; display:block; flex:0 0 auto; }
.company-logo img { width:100%; height:100%; object-fit:contain; display:block; }
[data-theme="technology"] .site-header .company-logo img { filter:brightness(0) invert(1); }
.brand-mark { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:11px; font-size:12px; font-weight:800; }
.brand-mark i { position:absolute; right:-4px; bottom:8px; width:8px; height:8px; border:2px solid var(--bg); border-radius:50%; background:var(--accent); }
.site-header nav { display:flex; gap:34px; color:var(--muted); font-size:13px; }
.site-header nav a:hover { color:var(--ink); }
.header-socials { display:flex; gap:8px; }
.header-socials a { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--muted); transition:.2s ease; }
.header-socials a:hover { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.header-socials svg { width:15px; height:15px; }
.header-cta,.primary-button { display:inline-flex; align-items:center; gap:20px; padding:15px 20px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:13px; }
.arrow { font-size:18px; line-height:1; transition:transform .2s ease; }
a:hover .arrow { transform:translate(2px,-2px); }
.arrow-down { display:inline-block; transform:rotate(90deg); }

.hero { min-height:650px; padding:78px max(5vw,32px) 65px; display:grid; grid-template-columns:minmax(430px,1fr) minmax(490px,.92fr); align-items:center; gap:8vw; }
.eyebrow { margin:0 0 28px; display:flex; align-items:center; gap:11px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent); }
.hero h1 { margin:0; max-width:780px; font-size:clamp(45px,5.2vw,82px); line-height:1.02; letter-spacing:-.055em; font-weight:650; }
.hero h1 em { color:var(--accent); font-family:Georgia,serif; font-weight:400; }
[data-theme="technology"] .hero h1 { letter-spacing:-.045em; text-transform:uppercase; font-size:clamp(43px,4.8vw,74px); }
[data-theme="technology"] .hero h1 em { font-family:inherit; font-style:normal; }
.hero-lead { max-width:630px; margin:28px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.hero-actions { margin-top:34px; display:flex; gap:14px; align-items:center; }
.primary-button { padding:18px 22px; }
.secondary-button { display:inline-flex; align-items:center; gap:17px; padding:17px 20px; border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:13px; font-weight:700; }

.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; }
.visual-grid { position:absolute; inset:4%; opacity:.55; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 70%); mask-image:radial-gradient(circle,#000 10%,transparent 70%); }
.core-card { position:relative; z-index:2; width:min(380px,75%); aspect-ratio:1/.92; padding:22px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:30px; background:color-mix(in srgb,var(--surface) 90%,transparent); box-shadow:0 30px 80px rgba(16,38,35,.14); backdrop-filter:blur(14px); }
[data-theme="technology"] .core-card { box-shadow:0 0 70px rgba(71,228,209,.08),0 40px 90px #0006; border-radius:4px; }
[data-theme="corporate"] .core-card { border-radius:14px; box-shadow:0 30px 90px rgba(17,68,148,.12); }
.core-head,.core-foot { display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.13em; color:var(--muted); }
.live-dot { color:var(--accent); }
.live-dot:before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--accent); }
.core-orbit { position:relative; display:grid; place-items:center; width:170px; height:170px; margin:auto; border:1px solid var(--line); border-radius:50%; }
.core-orbit:before { content:""; position:absolute; inset:18px; border:1px dashed var(--line); border-radius:50%; }
.core-orbit .brand-mark { z-index:2; width:68px; height:68px; border-radius:20px; background:var(--ink); color:var(--bg); border:0; font-size:18px; }
[data-theme="technology"] .core-orbit .brand-mark { background:var(--accent); color:var(--accent-ink); border-radius:3px; }
[data-theme="corporate"] .core-orbit .brand-mark { border-radius:12px; }
.orbit { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.orbit.one { top:18px; left:35px; }.orbit.two { right:6px; bottom:58px; }
.core-foot strong { color:var(--ink); font-size:11px; }
.float-card { position:absolute; z-index:3; min-width:210px; padding:15px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 16px 40px rgba(16,38,35,.12); }
[data-theme="technology"] .float-card { border-radius:2px; box-shadow:0 14px 44px #0006; }
[data-theme="corporate"] .float-card { border-radius:9px; }
.float-card p { margin:0; display:flex; flex-direction:column; gap:4px; }.float-card small { color:var(--muted); font-size:8px; letter-spacing:.14em; }.float-card strong { font-size:12px; }.float-card > i { margin-left:auto; color:var(--muted); font-size:9px; font-style:normal; }
.card-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-size:18px; }
.card-security { top:8%; left:-2%; }.card-cloud { right:-1%; top:29%; }.card-support { bottom:6%; left:4%; }
.signal { position:absolute; border-radius:50%; background:var(--accent); opacity:.18; filter:blur(1px); }.signal-a { width:250px; height:250px; right:6%; top:10%; }.signal-b { width:130px; height:130px; left:8%; bottom:12%; }

.trust-strip { min-height:102px; padding:22px max(5vw,32px); display:flex; align-items:center; justify-content:space-between; gap:40px; border-top:1px solid var(--line); background:var(--surface); }
.trust-strip p { margin:0; font-size:13px; color:var(--muted); }.trust-strip p strong { color:var(--ink); }
.trust-strip div { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:9px; letter-spacing:.13em; }.trust-strip i { width:4px; height:4px; border-radius:50%; background:var(--accent); }

.services-section,.contact-section { padding:120px max(5vw,32px); }
.section-heading { display:grid; grid-template-columns:minmax(180px,.42fr) 1fr; gap:50px; align-items:start; }
.section-index { margin:6px 0 0; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.14em; }
.section-heading h2,.approach-copy h2,.contact-intro h2 { margin:0; font-size:clamp(38px,4.2vw,64px); line-height:1.05; letter-spacing:-.045em; font-weight:600; }
.section-heading h2 em,.approach-copy h2 em,.contact-intro h2 em { color:var(--accent); font-family:Georgia,serif; font-weight:400; }
[data-theme="technology"] :is(.section-heading,.approach-copy,.contact-intro) h2 { text-transform:uppercase; }
[data-theme="technology"] :is(.section-heading,.approach-copy,.contact-intro) h2 em { font-family:inherit; font-style:normal; }
.section-heading > div > p { max-width:600px; margin:25px 0 0; color:var(--muted); line-height:1.7; }
.service-grid { margin-top:72px; display:grid; grid-template-columns:1.15fr repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-card { min-height:440px; padding:26px; display:flex; flex-direction:column; border-right:1px solid var(--line); transition:background .25s ease,transform .25s ease; }
.service-card:first-child { border-left:1px solid var(--line); }.service-card:hover { background:var(--surface); transform:translateY(-5px); }
.service-number { color:var(--muted); font-size:9px; letter-spacing:.12em; }.service-glyph { width:58px; height:58px; margin:45px 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:16px; color:var(--accent); font-size:24px; }
[data-theme="technology"] .service-glyph { border-radius:2px; }[data-theme="corporate"] .service-glyph { border-radius:10px; }
.service-card div > p { margin:0 0 10px; color:var(--accent); font-size:8px; font-weight:800; letter-spacing:.14em; }.service-card h3 { margin:0; font-size:25px; line-height:1.12; letter-spacing:-.03em; }.service-card > p { min-height:104px; margin:24px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.service-featured { background:var(--ink); color:var(--bg); }.service-featured .service-number,.service-featured > p { color:color-mix(in srgb,var(--bg) 65%,transparent); }.service-featured .service-glyph { border-color:color-mix(in srgb,var(--bg) 25%,transparent); }.service-featured:hover { background:var(--ink); }

.approach-section { padding:0 max(5vw,32px) 120px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr); gap:22px; }
.approach-panel { min-height:630px; padding:65px; display:grid; grid-template-columns:1fr 1fr; gap:8%; background:var(--ink); color:var(--bg); }
[data-theme="proximity"] .approach-panel { border-radius:34px; }[data-theme="corporate"] .approach-panel { border-radius:14px; }[data-theme="technology"] .approach-panel { border:1px solid var(--line); }
.approach-copy > p:last-child { margin-top:28px; color:color-mix(in srgb,var(--bg) 62%,transparent); line-height:1.7; }.approach-copy h2 { margin-top:25px; }
.approach-steps { margin:0; padding:0; list-style:none; border-top:1px solid color-mix(in srgb,var(--bg) 17%,transparent); }
.approach-steps li { min-height:120px; padding:25px 0; display:grid; grid-template-columns:45px 1fr; border-bottom:1px solid color-mix(in srgb,var(--bg) 17%,transparent); }.approach-steps li > span { color:var(--accent); font-size:10px; }.approach-steps strong { font-size:17px; }.approach-steps p { margin:7px 0 0; color:color-mix(in srgb,var(--bg) 58%,transparent); font-size:12px; line-height:1.5; }
.remote-card { min-height:630px; padding:38px; display:flex; flex-direction:column; background:var(--accent); color:var(--accent-ink); }
[data-theme="proximity"] .remote-card { border-radius:34px; }[data-theme="corporate"] .remote-card { border-radius:14px; }
.remote-card .section-index { color:var(--accent-ink); opacity:.7; }.remote-icon { width:100%; aspect-ratio:1/1; margin:35px 0; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent-ink) 30%,transparent); border-radius:50%; }.remote-icon span { width:82px; height:82px; display:grid; place-items:center; border-radius:50%; background:var(--accent-ink); color:var(--accent); font-size:35px; }
.remote-card h3 { margin:auto 0 0; font-size:29px; line-height:1.1; letter-spacing:-.03em; }.remote-card > p:not(.section-index) { font-size:13px; line-height:1.6; opacity:.75; }.remote-card > a { margin-top:15px; padding-top:20px; display:flex; justify-content:space-between; border-top:1px solid color-mix(in srgb,var(--accent-ink) 30%,transparent); font-size:12px; font-weight:800; }

.contact-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:10%; background:var(--surface); }
.contact-intro > p:not(.section-index) { max-width:440px; margin:28px 0; color:var(--muted); line-height:1.7; }.contact-intro h2 { margin-top:25px; }
.contact-details { margin-top:55px; display:grid; gap:0; }.contact-details > * { padding:20px 0; display:grid; grid-template-columns:100px 1fr; border-bottom:1px solid var(--line); }.contact-details span { color:var(--muted); font-size:8px; letter-spacing:.13em; }.contact-details strong { font-size:14px; line-height:1.5; }
.contact-form { padding:50px; align-self:start; display:grid; gap:24px; border:1px solid var(--line); background:var(--bg); }
[data-theme="proximity"] .contact-form { border-radius:26px; }[data-theme="corporate"] .contact-form { border-radius:12px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.contact-form label { display:grid; gap:9px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.contact-form input,.contact-form textarea { width:100%; padding:16px 0; border:0; border-bottom:1px solid var(--line); outline:none; resize:vertical; background:transparent; color:var(--ink); font:14px Arial,sans-serif; text-transform:none; letter-spacing:0; }.contact-form :is(input,textarea):focus { border-color:var(--accent); }.contact-form button { margin-top:10px; padding:18px 22px; display:flex; justify-content:space-between; border:0; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-weight:800; cursor:pointer; }.form-notice { margin:0; padding:12px; border:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.5; }

.contact-form .honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-notice.success { border-color:#2f8f62; background:#edf8f2; color:#195b3d; }
.form-notice.error { border-color:#c94d4d; background:#fff2f2; color:#8a2929; }

.site-footer { padding:60px max(5vw,32px) 25px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; background:#111c1c; color:#fff; }.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }.footer-brand > span { display:flex; flex-direction:column; }.footer-brand small { margin-top:4px; color:#a7b2b1; font-size:10px; }.site-footer .company-logo { width:156px; }.site-footer .company-logo img { filter:brightness(0) invert(1); }.footer-links { display:flex; gap:28px; color:#bdc6c5; font-size:12px; }.footer-bottom { grid-column:1/-1; margin:35px 0 0; padding-top:22px; display:flex; justify-content:space-between; border-top:1px solid #ffffff20; color:#748180; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }

@media (max-width:1000px) {
  .site-header { min-height:96px; gap:18px; }.site-header nav { display:none; }.header-cta { padding:13px; }.header-cta .arrow { display:none; }
  .hero { grid-template-columns:1fr; padding-top:55px; }.hero-copy { max-width:760px; }.hero-visual { min-height:480px; max-width:650px; width:100%; margin:auto; }
  .trust-strip { align-items:flex-start; flex-direction:column; }.trust-strip div { flex-wrap:wrap; }
  .service-grid { grid-template-columns:1fr 1fr; }.service-card:nth-child(3) { border-left:1px solid var(--line); }.approach-section { grid-template-columns:1fr; }.remote-card { min-height:auto; }.remote-icon { width:220px; }.contact-section { grid-template-columns:1fr; }.site-footer { grid-template-columns:1fr auto; }.footer-links { display:none; }
}
@media (max-width:600px) {
  .site-header,.hero,.trust-strip,.services-section,.approach-section,.contact-section,.site-footer { padding-left:20px; padding-right:20px; }
  .brand { margin-right:auto; }.brand small { margin-top:1px; font-size:8px; }.site-header { min-height:88px; gap:10px; padding-top:10px; padding-bottom:10px; }.site-header .company-logo { width:108px; }.header-socials { gap:5px; }.header-socials a { width:31px; height:31px; }.header-cta { padding:10px; font-size:10px; }
  .hero { padding-top:42px; gap:24px; }.hero h1 { font-size:43px; }.hero-lead { font-size:15px; }.hero-actions { align-items:stretch; flex-direction:column; }.hero-actions a { justify-content:space-between; }
  .hero-visual { min-height:410px; transform:scale(.9); margin:-10px 0; }.core-card { width:82%; }.float-card { min-width:190px; }.card-security { left:-4%; }.card-cloud { right:-6%; }.card-support { left:0; }
  .services-section,.contact-section { padding-top:80px; padding-bottom:80px; }.section-heading { grid-template-columns:1fr; gap:24px; }.section-heading h2,.approach-copy h2,.contact-intro h2 { font-size:39px; }.service-grid { grid-template-columns:1fr; margin-top:50px; }.service-card,.service-card:nth-child(3) { min-height:380px; border-left:1px solid var(--line); }.approach-panel { padding:36px 25px; grid-template-columns:1fr; }.remote-card { padding:30px 25px; }.contact-form { padding:30px 22px; }.field-row { grid-template-columns:1fr; }.site-footer { grid-template-columns:1fr; gap:30px; }.footer-bottom { flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
