@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --ink:#071017; --deep:#06131d; --teal:#1d9e9a; --violet:#7d3cff; --korika-red:#c9284b; --korika-red-dark:#79152f; --korika-pink:#ed4f88; --lime: #c8f23a; --orange:#ff724c; --paper:#f5f7f1; --muted:#67747d; --line:rgba(255,255,255,.15); --display:'Space Grotesk',sans-serif; --body:'DM Sans',sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a { color:inherit; text-decoration:none; } .section-shell { max-width:1320px; margin:auto; padding-left:5vw; padding-right:5vw; }
.ambient { position:absolute; z-index:-1; width:42vw; height:42vw; filter:blur(90px); opacity:.38; border-radius:50%; pointer-events:none; } .ambient-one { top:50px; left:-17vw; background:#0a665d; } .ambient-two { top:10px; right:-12vw; background:#5723bc; }
.site-header { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1320px; margin:auto; padding:18px 1.4vw; background:#050609; color:#fff; border-radius:999px; } .brand { display:flex; align-items:center; gap:10px; font:600 15px var(--display); white-space:nowrap; } .brand b { color:var(--korika-pink); font-weight:600; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#fff; background:var(--korika-red); border-radius:50%; font:700 17px var(--display); } nav { display:flex; align-items:center; gap:30px; } nav a { color:#fff; font-size:13px; font-weight:500; opacity:.76; transition:opacity .2s,color .2s; } nav a:hover { color:var(--korika-pink); opacity:1; } .header-actions { display:flex; align-items:center; gap:15px; } .language-switch { display:flex; padding:3px; background:#fff; border-radius:999px; } .language-switch button { border:0; border-radius:999px; padding:7px 9px; color:#15191b; background:transparent; cursor:pointer; font:700 10px var(--body); } .language-switch button.active { color:#fff; background:var(--korika-red); } .header-cta { padding:11px 17px; color:#fff; background:var(--korika-red); border-radius:999px; font-size:12px; font-weight:700; }
.hero { min-height:690px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; padding-top:65px; padding-bottom:82px; } .hero-copy { max-width:660px; } .eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 23px; color:#3c4a52; font:700 10px var(--body); letter-spacing:.16em; text-transform:uppercase; } .eyebrow span:first-child { display:inline-block; width:7px; height:7px; background:var(--korika-red); border-radius:50%; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--display); letter-spacing:-.055em; } h1 { max-width:720px; margin-bottom:27px; font-size:clamp(64px,8.3vw,122px); line-height:.86; font-weight:600; } h1 em,h2 em { color:var(--korika-red); font-style:normal; } .hero-lede { max-width:560px; color:#526169; font-size:18px; line-height:1.6; } .hero-actions { display:flex; gap:12px; margin-top:34px; } .button { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:15px 22px; font-size:12px; font-weight:700; } .button-primary { color:#fff; background:var(--ink); } .button-primary:hover { background:var(--korika-red); } .button-ghost { border:1px solid #b9c0bf; } .button-ghost:hover { border-color:var(--korika-red); color:var(--korika-red-dark); } .hero-proof { display:flex; flex-wrap:wrap; gap:22px; margin-top:39px; color:#79848a; font-size:11px; font-weight:600; } .hero-proof i { color:var(--korika-red); font-style:normal; margin-right:5px; }
.hero-visual { position:relative; display:grid; place-items:center; height:520px; } .hero-visual::before { content:""; position:absolute; width:470px; height:470px; background:linear-gradient(135deg,var(--teal),var(--korika-red-dark) 42%,var(--korika-pink) 67%,var(--violet)); border-radius:50%; } .hero-visual::after { content:""; position:absolute; width:280px; height:280px; background:rgba(3,12,19,.56); border-radius:50%; filter:blur(20px); } .network-orbit { position:absolute; z-index:1; border:1px solid rgba(255,255,255,.52); border-radius:50%; transform:rotate(-28deg); } .orbit-a { width:490px; height:205px; } .orbit-b { width:380px; height:390px; transform:rotate(55deg); } .orbit-c { width:320px; height:445px; transform:rotate(112deg); border-color:rgba(237,79,136,.75); } .network-core { position:relative; z-index:2; display:flex; align-items:center; gap:13px; color:#fff; font:500 10px/1.25 var(--body); letter-spacing:.12em; } .network-core b { color:var(--lime); font-weight:700; } .core-mark { display:grid; place-items:center; width:67px; height:67px; color:#fff; background:var(--korika-red); border-radius:50%; font:700 35px var(--display); } .node { position:absolute; z-index:3; display:grid; gap:3px; max-width:155px; padding:9px 12px; color:#fff; background:rgba(5,6,9,.9); border:1px solid rgba(255,255,255,.22); border-radius:14px; font:700 9px var(--body); letter-spacing:.08em; box-shadow:0 8px 24px rgba(0,0,0,.18); } .node strong { font-size:8px; } .node small { color:#f3b3c5; font:500 10px var(--body); letter-spacing:0; white-space:nowrap; } .node-one { top:5%; left:0; } .node-two { top:13%; right:-2%; } .node-three { bottom:11%; left:-2%; } .node-four { right:0; bottom:17%; color:var(--ink); background:var(--lime); border-color:var(--lime); } .node-four small { color:#26320e; }
.signal-strip { overflow:hidden; color:#fff; background:var(--ink); } .signal-strip div { display:flex; justify-content:space-around; min-width:950px; padding:15px 0; font:700 11px var(--body); letter-spacing:.18em; } .signal-strip b { color:var(--korika-pink); }
.section { padding-top:125px; padding-bottom:125px; } .section-heading { max-width:760px; } .section-heading h2,.partner-banner h2 { margin-bottom:25px; font-size:clamp(45px,6vw,80px); line-height:.94; font-weight:600; } .section-heading > p:last-child { max-width:590px; color:#647077; font-size:16px; line-height:1.6; } .intro-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:18px; margin-top:68px; } .large-copy { padding-right:50px; color:#31424b; font:500 25px/1.35 var(--display); letter-spacing:-.03em; } .stat-card { min-height:210px; padding:28px; color:#fff; background:#112d39; border-radius:22px; } .stat-card.accent { color:var(--ink); background:var(--lime); } .stat-card strong { display:block; margin-bottom:55px; color:var(--korika-red); font:700 12px var(--body); } .stat-card span { display:block; margin-bottom:10px; font:700 17px var(--display); } .stat-card p { margin:0; font-size:13px; line-height:1.5; opacity:.75; } .stat-card.accent strong { color:var(--korika-red-dark); }
.platform-section { padding-top:112px; padding-bottom:118px; background:linear-gradient(135deg,#eef3ee 0%,#f5f7f1 55%,#f6e8ed 100%); } .platform-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:end; } .platform-heading h2 { max-width:680px; margin:0; font:600 clamp(45px,6vw,78px)/.94 var(--display); letter-spacing:-.055em; } .platform-heading h2 em { color:var(--korika-red); font-style:normal; } .platform-lede { max-width:520px; margin:0 0 8px; color:#526169; font-size:18px; line-height:1.6; } .platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:64px; } .platform-grid article { min-height:230px; padding:27px; background:#fff; border:1px solid rgba(7,16,23,.1); border-radius:20px; box-shadow:0 15px 35px rgba(7,16,23,.06); } .platform-grid article span { color:var(--korika-red); font:700 11px var(--body); } .platform-grid h3 { margin:58px 0 12px; color:var(--ink); font:600 21px var(--display); } .platform-grid p { margin:0; color:#637179; font-size:13px; line-height:1.55; } .platform-actions { display:flex; gap:12px; margin-top:32px; } .platform-actions .button-primary { background:var(--korika-red); } .platform-actions .button-primary:hover { background:var(--korika-red-dark); }
.section-dark { color:#fff; background:linear-gradient(130deg,#07151d,var(--korika-red-dark) 54%,#34115f); } .light { color:#fff; } .light h2 { color:#fff; } .light h2 em { color:var(--lime); } .light > p:last-child { color:#a5b4b9; }
.why-section { background:#eaf0eb; } .why-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:end; } .why-heading .section-heading { max-width:680px; } .why-heading h2 { margin-bottom:0; } .why-lede { max-width:600px; margin:0 0 7px; color:#526169; font-size:17px; line-height:1.7; } .value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:64px; } .value-card { min-height:290px; padding:28px; border:1px solid rgba(7,16,23,.1); border-radius:20px; background:#f8faf6; box-shadow:0 15px 35px rgba(7,16,23,.045); } .value-card > span { color:var(--korika-red); font:700 11px var(--body); } .value-card h3 { margin:66px 0 14px; font:600 24px var(--display); letter-spacing:-.035em; } .value-card p { margin:0; color:#637179; font-size:14px; line-height:1.65; } .values-note { max-width:900px; margin:30px 0 0; padding-left:18px; border-left:3px solid var(--korika-red); color:#31424b; font:500 18px/1.55 var(--display); }
.orchestration { padding-top:105px; padding-bottom:110px; } .orchestration .section-heading { max-width:850px; } .orchestration-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:58px; } .orchestration-card { min-height:290px; padding:24px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(255,255,255,.055); } .orchestration-card h3 { margin:70px 0 13px; color:#fff; font:600 22px var(--display); } .orchestration-card p { min-height:66px; margin-bottom:22px; color:#b8c5c9; font-size:13px; line-height:1.5; } .orchestration-number { color:var(--korika-pink); font:700 11px var(--body); } .orchestration-core { background:linear-gradient(145deg,rgba(201,40,75,.78),rgba(121,21,47,.62)); } .orchestration-platform { background:linear-gradient(145deg,rgba(29,158,154,.3),rgba(125,60,255,.28)); } .orchestration-tags { display:flex; flex-wrap:wrap; gap:6px; } .orchestration-tags span { padding:6px 8px; color:#dfe8ea; border:1px solid rgba(255,255,255,.2); border-radius:999px; font:700 8px var(--body); letter-spacing:.08em; } .orchestration-core .orchestration-tags span { color:#fff; border-color:rgba(255,255,255,.35); }
.partner-banner { display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:end; padding:60px; color:#fff; background:linear-gradient(120deg,#111d32,var(--korika-red-dark) 48%,#6b1b91); border-radius:26px; } .partner-banner .eyebrow { color:#d5dce0; } .partner-banner h2 { margin-bottom:0; } .partner-banner h2 em { color:var(--lime); } .partner-banner p:not(.eyebrow) { color:#c4c9d0; line-height:1.65; } .partner-banner .button { margin-top:20px; color:#fff; background:var(--korika-red); }
footer { color:#c6ced2; background:#050609; } .footer-grid { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; gap:40px; padding-top:50px; padding-bottom:45px; } .footer-grid p { max-width:320px; margin:0; font-size:13px; line-height:1.5; } .footer-grid > div { display:flex; justify-content:flex-end; gap:24px; font-size:12px; } .footer-grid > div a:hover { color:var(--korika-pink); } .footer-bottom { display:flex; justify-content:space-between; padding-top:17px; padding-bottom:20px; border-top:1px solid var(--line); color:#718087; font-size:10px; }
button:focus-visible, a:focus-visible { outline:3px solid var(--korika-pink); outline-offset:4px; }
@media (max-width:900px) { .site-header { margin:0 3vw; } nav { display:none; } .hero { grid-template-columns:1fr; padding-top:80px; } .hero-visual { margin-top:0; } .intro-grid,.partner-banner,.platform-heading,.why-heading { grid-template-columns:1fr; } .platform-heading,.why-heading { gap:25px; } .large-copy { padding-right:0; } .orchestration-grid,.platform-grid { grid-template-columns:1fr 1fr; } .value-grid { grid-template-columns:1fr; } .value-card { min-height:0; } .value-card h3 { margin-top:42px; } .partner-banner { gap:25px; } .footer-grid { grid-template-columns:1fr 1fr; } .footer-grid p { grid-column:span 2; order:3; } }
@media (max-width:600px) { .site-header { padding:13px 12px; } .header-cta { display:none; } .hero { min-height:0; padding-top:75px; padding-bottom:70px; } h1 { font-size:clamp(58px,17vw,92px); } .hero-lede { font-size:16px; } .hero-visual { height:360px; margin:0 -20px; transform:scale(.78); } .node { max-width:140px; } .node-one { left:4%; } .node-two { right:0; } .node-three { left:0; } .node-four { right:3%; } .section { padding-top:85px; padding-bottom:85px; } .section-heading h2,.partner-banner h2 { font-size:clamp(43px,13vw,64px); } .platform-heading h2 { font-size:clamp(43px,13vw,64px); } .intro-grid,.orchestration-grid,.platform-grid { grid-template-columns:1fr; } .large-copy { font-size:22px; } .stat-card { min-height:190px; } .stat-card strong { margin-bottom:40px; } .orchestration-card { min-height:250px; } .orchestration-card h3 { margin-top:48px; } .orchestration-card p { min-height:0; } .platform-grid { margin-top:42px; } .platform-grid article { min-height:0; } .platform-grid h3 { margin-top:42px; } .platform-actions { flex-direction:column; align-items:stretch; } .partner-banner { padding:30px; } .footer-grid { grid-template-columns:1fr; gap:25px; } .footer-grid p { grid-column:auto; order:initial; } .footer-grid > div { justify-content:flex-start; flex-wrap:wrap; } .footer-bottom { gap:10px; flex-direction:column; } }