/* =========================================================================== INTENSE Communication — main.css Dark editorial system. No frameworks, no runtime dependencies. 00 tokens 12 services 01 reset & base 13 ai & automation 02 typography 14 workflow 03 layout 15 cost 04 atmosphere 16 statement 05 reveal motion 17 principles 06 cursor 18 why 07 preloader 19 portfolio 08 header / nav 20 operation / technology / together 09 buttons 21 contact & form 10 hero 22 footer 11 intro 23 responsive 24 reduced motion & print =========================================================================== */ /* fonts.css is linked separately in so both stylesheets download in parallel; an @import here would serialise the two round trips. */ /* ---------------------------------------------------------- 00 tokens ---- */ :root{ --ink-0:#06070A; --ink-1:#0A0C11; --ink-2:#0F1218; --ink-3:#161A22; --ink-4:#1E232D; --paper-0:#F3F3EF; --paper-1:#E8E8E2; --fg-0:#F2F2EF; --fg-1:#B9BCC4; --fg-2:#82868F; --fg-3:#5A5E67; --acc:#3B5BFF; --acc-1:#7B92FF; --acc-2:#C3CDFF; --line-0:rgba(242,242,239,.09); --line-1:rgba(242,242,239,.16); --line-2:rgba(242,242,239,.30); --ff-sans:"Inter","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --ff-mono:"JetBrains Mono","Pretendard Variable",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-mega:clamp(3rem, 9.6vw, 11rem); --fs-display:clamp(2.5rem, 6.4vw, 6.75rem); --fs-h1:clamp(2rem, 4.5vw, 4.25rem); --fs-h2:clamp(1.7rem, 3.2vw, 3rem); --fs-h3:clamp(1.28rem, 1.8vw, 1.85rem); --fs-h4:clamp(1.06rem, 1.2vw, 1.28rem); --fs-lead:clamp(1.0625rem, 1.22vw, 1.35rem); --fs-body:clamp(0.9375rem, .95vw, 1.0625rem); --fs-sm:clamp(0.8125rem, .85vw, 0.9375rem); --fs-label:0.6875rem; --gutter:clamp(1.25rem, 4.2vw, 5rem); --maxw:1680px; --sp-section:clamp(6rem, 12vw, 13rem); --sp-block:clamp(3rem, 6vw, 6rem); --header-h:clamp(62px, 5.6vw, 82px); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); color-scheme:dark; } /* --------------------------------------------------- 01 reset & base ---- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); background:var(--ink-0); } body{ margin:0; background:var(--ink-0); color:var(--fg-0); font-family:var(--ff-sans); font-size:var(--fs-body); font-weight:400; line-height:1.72; letter-spacing:-0.005em; font-feature-settings:"ss01" 1,"cv05" 1,"calt" 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; word-break:keep-all; overflow-wrap:anywhere; } body.is-locked{overflow:hidden} h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0} ul,ol{margin:0;padding:0;list-style:none} img,svg,video{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit} button{background:none;border:0;padding:0;cursor:pointer} a{color:inherit;text-decoration:none} ::selection{background:var(--acc);color:#fff} :focus-visible{outline:2px solid var(--acc-1);outline-offset:3px;border-radius:2px} .skip{ position:fixed;left:1rem;top:1rem;z-index:3000; transform:translateY(-180%); background:var(--fg-0);color:var(--ink-0); padding:.7rem 1.1rem;border-radius:2px; font:600 .8125rem/1 var(--ff-sans); transition:transform .3s var(--ease-out); } .skip:focus{transform:none} .vh{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ------------------------------------------------------ 02 typography ---- */ .mono{ font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500; letter-spacing:.16em;text-transform:uppercase;line-height:1.4; } .eyebrow{ display:inline-flex;align-items:center;gap:.72em; font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);line-height:1; } .eyebrow::before{ content:"";width:.4em;height:.4em;border-radius:50%;flex:none; background:var(--acc);box-shadow:0 0 0 3px rgba(59,91,255,.16); } .display,.h1,.h2,.h3{font-weight:640;line-height:1.08;letter-spacing:-0.038em;text-wrap:balance} .display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-0.046em} .h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-0.042em} .h2{font-size:var(--fs-h2);line-height:1.14;letter-spacing:-0.036em} .h3{font-size:var(--fs-h3);line-height:1.24;letter-spacing:-0.028em;font-weight:600} .h4{font-size:var(--fs-h4);line-height:1.36;letter-spacing:-0.022em;font-weight:600} .mega{ font-size:var(--fs-mega);font-weight:680;line-height:.95; letter-spacing:-0.055em;text-transform:uppercase;text-wrap:balance; } .lead{font-size:var(--fs-lead);line-height:1.6;color:var(--fg-1);letter-spacing:-0.012em;max-width:46ch} .body{color:var(--fg-1);max-width:54ch} .body p+p{margin-top:1.15em} .dim{color:var(--fg-2)} .acc{color:var(--acc-1)} .nb{white-space:nowrap} /* ---------------------------------------------------------- 03 layout ---- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{position:relative;padding-block:var(--sp-section)} .section--tight{padding-block:clamp(4.5rem,8vw,8rem)} .section--paper{ background:var(--paper-0);color:var(--ink-0); --fg-0:#0A0C11;--fg-1:#41454D;--fg-2:#6B6F77;--fg-3:#8D9199; --line-0:rgba(6,7,10,.11);--line-1:rgba(6,7,10,.18);--line-2:rgba(6,7,10,.32); --acc-1:#2340D6;--acc-2:#3F58DC; } .section--paper ::selection{background:var(--acc);color:#fff} .shead{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(1.5rem,4vw,5rem);align-items:start} .shead__label{position:sticky;top:calc(var(--header-h) + 2rem)} .shead__title{max-width:24ch} .shead__intro{margin-top:clamp(1.5rem,2.6vw,2.5rem);max-width:58ch} .rule{height:1px;width:100%;background:var(--line-0);border:0;margin:0} .idx{ font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500; letter-spacing:.12em;color:var(--fg-3);font-variant-numeric:tabular-nums; } .tags{display:flex;flex-wrap:wrap;gap:.4rem} .tag{ font-family:var(--ff-mono);font-size:.625rem;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line-1); border-radius:100px;padding:.36em .78em .32em;line-height:1;white-space:nowrap; transition:border-color .5s var(--ease-out),color .5s var(--ease-out); } .scope{display:flex;flex-wrap:wrap;gap:.45rem} .scope li{ font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; color:var(--fg-2);padding:.44em .8em .4em;border:1px solid var(--line-0);border-radius:2px; background:rgba(255,255,255,.014);line-height:1; transition:color .5s var(--ease-out),border-color .5s var(--ease-out); } .section--paper .scope li{background:rgba(6,7,10,.02)} /* ------------------------------------------------------ 04 atmosphere ---- */ .grain{ position:fixed;inset:0;z-index:900;pointer-events:none; opacity:.13; background-image:var(--grain-url); background-size:170px 170px; animation:grainshift 5.4s steps(6) infinite; } @keyframes grainshift{ 0%{background-position:0 0} 16%{background-position:-24px 18px} 33%{background-position:31px -13px} 50%{background-position:-17px -29px} 66%{background-position:22px 27px} 83%{background-position:-31px 9px} 100%{background-position:0 0} } .glow{ position:absolute;border-radius:50%;pointer-events:none; filter:blur(90px);opacity:.5;z-index:0; } /* thin vertical grid lines behind sections */ .gridlines{ position:absolute;inset:0;pointer-events:none;z-index:0; max-width:var(--maxw);margin-inline:auto; padding-inline:var(--gutter); display:grid;grid-template-columns:repeat(4,1fr); } .gridlines span{border-left:1px solid var(--line-0)} .gridlines span:first-child{border-left:0} /* ------------------------------------------------- 05 reveal motion ------ */ [data-reveal]{ opacity:0; transform:translate3d(0,var(--reveal-y,18px),0); transition:opacity .95s var(--ease-out),transform 1.05s var(--ease-out); transition-delay:var(--d,0ms); will-change:opacity,transform; } [data-reveal].in{opacity:1;transform:none} /* line-mask reveal for headlines */ .lines{display:block} .line{display:block;overflow:hidden;padding-block:.02em} .line > span{ display:block; transform:translate3d(0,110%,0); transition:transform 1.15s var(--ease-out); transition-delay:var(--d,0ms); will-change:transform; } .in .line > span,.lines.in > .line > span{transform:none} /* clip-in for blocks/media */ [data-clip]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease-out); transition-delay:var(--d,0ms); } [data-clip].in{clip-path:inset(0 0 0 0)} /* growing hairline */ [data-line]{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out);transition-delay:var(--d,0ms)} [data-line].in{transform:scaleX(1)} /* ---------------------------------------------------------- 06 cursor ---- */ .cursor{ position:fixed;top:0;left:0;z-index:1200;pointer-events:none; mix-blend-mode:difference;opacity:0; transition:opacity .4s ease; } .cursor.on{opacity:1} .cursor__dot{ position:absolute;width:6px;height:6px;border-radius:50%; background:#fff;transform:translate(-50%,-50%); } .cursor__ring{ position:absolute;width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.6); transform:translate(-50%,-50%) scale(1); transition:width .45s var(--ease-out),height .45s var(--ease-out), border-color .45s var(--ease-out),background-color .45s var(--ease-out); } .cursor.hot .cursor__ring{width:72px;height:72px;background:rgba(255,255,255,.9);border-color:transparent} .cursor.hot .cursor__dot{opacity:0} .cursor__label{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase; color:#000;opacity:0;transition:opacity .3s ease;white-space:nowrap; } .cursor.hot .cursor__label{opacity:1} @media (hover:none),(pointer:coarse){.cursor{display:none}} /* ------------------------------------------------------- 07 preloader ---- */ .preload{ position:fixed;inset:0;z-index:2500;background:var(--ink-0); display:grid;place-items:center; transition:opacity .7s var(--ease-out),visibility .7s; } .preload__inner{ display:flex;align-items:baseline;gap:1.1rem; padding-inline:var(--gutter); } .preload__mark{ font-size:clamp(1.6rem,4.2vw,3rem);font-weight:680;letter-spacing:-0.05em; color:var(--fg-0); } .preload__num{ font-family:var(--ff-mono);font-size:.8125rem;letter-spacing:.14em; color:var(--fg-3);font-variant-numeric:tabular-nums; } .preload__bar{ position:absolute;left:0;bottom:0;height:1px;width:100%; background:var(--line-0); } .preload__bar i{ display:block;height:100%;width:0%;background:var(--acc); transition:width .25s linear; } body.loaded .preload{opacity:0;visibility:hidden} /* -------------------------------------------------- 08 header / nav ------ */ .header{ position:fixed;top:0;left:0;right:0;z-index:1000; height:var(--header-h); display:flex;align-items:center; transition:transform .55s var(--ease-out),background-color .55s ease,border-color .55s ease,backdrop-filter .55s ease; border-bottom:1px solid transparent; } .header.pinned{ background:rgba(6,7,10,.72); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line-0); } .header.hidden{transform:translateY(-100%)} .header__in{ width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:2rem; } .brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-0.04em;font-size:1.0625rem} .brand__dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none; box-shadow:0 0 12px var(--acc);animation:pulse 3.4s var(--ease-io) infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}} .brand__sub{ font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase; color:var(--fg-3);align-self:center;padding-left:.55rem;border-left:1px solid var(--line-0); } .nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)} .nav a{ position:relative;font-size:.8125rem;font-weight:500;letter-spacing:-0.005em; color:var(--fg-1);padding-block:.35rem;transition:color .4s var(--ease-out); } .nav a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .5s var(--ease-out); } .nav a:hover{color:var(--fg-0)} .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left} .nav a[aria-current="true"]{color:var(--fg-0)} .header__cta{display:flex;align-items:center;gap:1rem} .burger{ display:none;width:44px;height:44px;margin-right:-10px; position:relative;flex:none; } .burger span{ position:absolute;left:11px;width:22px;height:1.5px;background:var(--fg-0); transition:transform .5s var(--ease-out),opacity .3s ease; } .burger span:nth-child(1){top:19px} .burger span:nth-child(2){top:25px} body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)} body.menu-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)} .menu{ position:fixed;inset:0;z-index:999;background:var(--ink-1); display:flex;flex-direction:column;justify-content:center; padding:var(--header-h) var(--gutter) 3rem; clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-out); visibility:hidden; } body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible} .menu__list li{overflow:hidden} .menu__list a{ display:block;font-size:clamp(2rem,10vw,3.2rem);font-weight:660;letter-spacing:-0.045em; line-height:1.24;padding-block:.12em; transform:translateY(105%);transition:transform .8s var(--ease-out); } body.menu-open .menu__list a{transform:none} body.menu-open .menu__list li:nth-child(1) a{transition-delay:.1s} body.menu-open .menu__list li:nth-child(2) a{transition-delay:.16s} body.menu-open .menu__list li:nth-child(3) a{transition-delay:.22s} body.menu-open .menu__list li:nth-child(4) a{transition-delay:.28s} body.menu-open .menu__list li:nth-child(5) a{transition-delay:.34s} .menu__foot{ margin-top:auto;padding-top:2.5rem;border-top:1px solid var(--line-0); display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:end; } /* scroll progress */ .progress{ position:fixed;left:0;top:0;height:2px;z-index:1100; background:linear-gradient(90deg,var(--acc),var(--acc-1)); width:0%;pointer-events:none; box-shadow:0 0 14px var(--acc); } /* --------------------------------------------------------- 09 buttons ---- */ .btn{ --btn-bg:var(--fg-0);--btn-fg:var(--ink-0); position:relative;display:inline-flex;align-items:center;gap:.7em; padding:.95em 1.5em;border-radius:100px; font-size:.875rem;font-weight:560;letter-spacing:-0.012em;line-height:1; color:var(--btn-fg);background:var(--btn-bg); overflow:hidden;isolation:isolate;white-space:nowrap; transition:color .45s var(--ease-out),transform .5s var(--ease-out); } .btn::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--acc); transform:translateY(101%); transition:transform .55s var(--ease-out); } .btn:hover::before{transform:translateY(0)} .btn:hover{color:#fff} .btn svg,.btn .arw{transition:transform .5s var(--ease-out)} .btn:hover .arw{transform:translateX(4px)} .btn--ghost{ --btn-bg:transparent;--btn-fg:var(--fg-0); border:1px solid var(--line-1); } .btn--ghost:hover{border-color:transparent} .btn--sm{padding:.72em 1.15em;font-size:.8125rem} .btn--lg{padding:1.15em 1.9em;font-size:1rem} /* text link with animated underline + arrow */ .tlink{ display:inline-flex;align-items:center;gap:.5em; font-size:.9375rem;font-weight:540;color:var(--fg-0); position:relative;padding-bottom:.35em; } .tlink::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform-origin:right;transform:scaleX(1); transition:transform .55s var(--ease-out); } .tlink:hover::after{transform:scaleX(0)} .tlink .arw{transition:transform .5s var(--ease-out)} .tlink:hover .arw{transform:translateX(5px)} .arw{display:inline-block;line-height:1} /* ------------------------------------------------------------ 10 hero ---- */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; padding-top:calc(var(--header-h) + 4rem); padding-bottom:clamp(1.5rem,3vw,2.5rem); overflow:hidden; } .hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero__glow-a{ width:min(70vw,900px);aspect-ratio:1;left:-14%;top:-16%; background:radial-gradient(circle,rgba(59,91,255,.42),transparent 66%); } .hero__glow-b{ width:min(60vw,780px);aspect-ratio:1;right:-12%;bottom:-22%; background:radial-gradient(circle,rgba(123,146,255,.24),transparent 68%); } .hero__mesh{ position:absolute;inset:0; background: linear-gradient(to bottom,rgba(6,7,10,0) 42%,rgba(6,7,10,.86) 92%), radial-gradient(120% 80% at 50% 0%,rgba(59,91,255,.10),transparent 60%); } .hero__in{position:relative;z-index:2;width:100%} .hero__eyebrow{margin-bottom:clamp(1.5rem,3.4vw,2.6rem)} .hero__title{ font-size:var(--fs-display);font-weight:660;line-height:1.02;letter-spacing:-0.048em; margin-bottom:clamp(1.75rem,3.6vw,3rem); max-width:16ch; } .hero__title em{font-style:normal;color:var(--acc-1)} .hero__cols{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.75rem,4vw,4rem);align-items:end; } .hero__sub{max-width:46ch;color:var(--fg-1);font-size:var(--fs-lead);line-height:1.6} .hero__sub p+p{margin-top:1.1em} .hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.5rem)} .hero__keys{ display:flex;flex-wrap:wrap;gap:.5rem .5rem; justify-content:flex-start; } .hero__keys li{ font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-2);border:1px solid var(--line-0);border-radius:100px; padding:.5em .9em .46em;line-height:1; background:rgba(255,255,255,.02);backdrop-filter:blur(6px); } .hero__foot{ position:relative;z-index:2;margin-top:clamp(2.5rem,6vw,5rem); display:flex;align-items:end;justify-content:space-between;gap:2rem; padding-top:1.25rem;border-top:1px solid var(--line-0); } .hero__scroll{ display:inline-flex;align-items:center;gap:.65rem; font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase; color:var(--fg-3); } .hero__scroll i{ width:1px;height:26px;background:linear-gradient(var(--fg-3),transparent); display:block;position:relative;overflow:hidden; } .hero__scroll i::after{ content:"";position:absolute;inset:0;background:var(--acc-1); animation:scrolldrop 2.1s var(--ease-io) infinite; } @keyframes scrolldrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} /* ----------------------------------------------------------- 11 intro ---- */ .intro__grid{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,6rem);align-items:start; } .intro__title{max-width:15ch} .intro__body{color:var(--fg-1);font-size:var(--fs-lead);line-height:1.66;max-width:50ch} .intro__body p+p{margin-top:1.35em} .highlight{ margin-top:clamp(2.5rem,5vw,4rem); padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line-0);border-radius:4px; background:linear-gradient(135deg,rgba(59,91,255,.10),rgba(59,91,255,0) 62%); position:relative;overflow:hidden; } .highlight::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc); } .highlight strong{ display:block;font-size:clamp(1.4rem,2.4vw,2.05rem);font-weight:660; letter-spacing:-0.038em;line-height:1.15;margin-bottom:.5rem;color:var(--fg-0); } .highlight span{color:var(--fg-1);font-size:var(--fs-sm)} /* stats strip */ .stats{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line-0);margin-top:clamp(3rem,6vw,5rem); } .stats li{ padding:clamp(1.5rem,3vw,2.25rem) 0; border-right:1px solid var(--line-0);padding-right:1.25rem; } .stats li:last-child{border-right:0} .stats b{ display:block;font-size:clamp(1.75rem,3.4vw,2.9rem);font-weight:660; letter-spacing:-0.05em;line-height:1;margin-bottom:.55rem; font-variant-numeric:tabular-nums; } .stats span{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)} /* -------------------------------------------------------- 12 services ---- */ .svc{border-top:1px solid var(--line-0)} .svc__item{ position:relative; display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,4fr) minmax(0,3.4fr); gap:clamp(1.25rem,3vw,3.5rem); padding-block:clamp(2.25rem,4.4vw,3.75rem); border-bottom:1px solid var(--line-0); align-items:start; transition:background-color .6s var(--ease-out); } .svc__item::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--acc);transform:scaleX(0);transform-origin:left; transition:transform .8s var(--ease-out); } .svc__item:hover::after{transform:scaleX(1)} .svc__item:hover .tag,.svc__item:hover .scope li{border-color:var(--line-2);color:var(--fg-1)} .svc__num{ font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--fg-3); padding-top:.5rem;font-variant-numeric:tabular-nums; } .svc__kicker{ font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase; color:var(--acc-1);margin-bottom:1rem;display:block; } .svc__title{margin-bottom:1.15rem;max-width:18ch} .svc__desc{color:var(--fg-1);max-width:46ch} .svc__desc p+p{margin-top:1em} .svc__scope{padding-top:.4rem} .svc__scope .mono{color:var(--fg-3);margin-bottom:1rem;display:block;font-size:.625rem} /* --------------------------------------------------- 13 ai & automation -- */ .ai{position:relative;overflow:hidden;background:var(--ink-1)} .ai__glow{ width:min(60vw,760px);aspect-ratio:1;right:-16%;top:6%; background:radial-gradient(circle,rgba(59,91,255,.30),transparent 66%); } .ai__key{ margin-top:clamp(2.5rem,5vw,4rem); display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap; } .ai__key b{ font-size:clamp(1.5rem,3.2vw,2.7rem);font-weight:660;letter-spacing:-0.045em; line-height:1.08;display:block; } .ai__key b span{display:block} .ai__key b span:last-child{color:var(--acc-1)} .ai__key i{flex:1;height:1px;background:var(--line-0);min-width:60px;font-style:normal} .aigrid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;background:var(--line-0); margin-top:clamp(3rem,6vw,5rem); border:1px solid var(--line-0); } .aicard{ background:var(--ink-1); padding:clamp(1.6rem,2.6vw,2.4rem); display:flex;flex-direction:column;gap:1rem; position:relative;overflow:hidden; transition:background-color .6s var(--ease-out); min-height:clamp(300px,26vw,380px); } .aicard::before{ content:"";position:absolute;inset:0;opacity:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(59,91,255,.16),transparent 70%); transition:opacity .55s var(--ease-out);pointer-events:none; } .aicard:hover::before{opacity:1} .aicard:hover{background:var(--ink-2)} .aicard__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .aicard__kicker{ font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-1); } .aicard__title{font-size:clamp(1.16rem,1.5vw,1.5rem);font-weight:620;letter-spacing:-0.03em;line-height:1.26} .aicard__desc{color:var(--fg-1);font-size:var(--fs-sm);line-height:1.68} .aicard__scope{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line-0)} .aicard__scope .mono{font-size:.5625rem;color:var(--fg-3);display:block;margin-bottom:.75rem} .aicard:hover .scope li{border-color:var(--line-1);color:var(--fg-1)} /* ------------------------------------------------------- 14 workflow ----- */ .flow{background:var(--ink-0);position:relative;overflow:hidden} .flow__head{margin-bottom:clamp(2.5rem,5vw,4rem)} .flow__track{ display:flex;gap:1px;background:var(--line-0); border-block:1px solid var(--line-0); overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; } .flow__track::-webkit-scrollbar{display:none} .flow__step{ flex:0 0 clamp(268px,25vw,352px); scroll-snap-align:start; background:var(--ink-0); padding:clamp(1.6rem,2.4vw,2.25rem) clamp(1.4rem,2vw,1.9rem) clamp(1.8rem,2.6vw,2.4rem); display:flex;flex-direction:column;gap:1.05rem; position:relative; transition:background-color .6s var(--ease-out); min-height:clamp(360px,32vw,440px); } .flow__step:hover{background:var(--ink-2)} .flow__step::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc); transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out); } .flow__step:hover::before{transform:scaleX(1)} .flow__stepnum{ font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.18em;color:var(--fg-3); } .flow__stepname{ font-size:clamp(1.5rem,2.2vw,2rem);font-weight:680;letter-spacing:-0.04em;line-height:1; text-transform:uppercase; } .flow__stepsub{ font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--acc-1);margin-top:-.35rem; } .flow__stepdesc{color:var(--fg-1);font-size:var(--fs-sm);line-height:1.66} .flow__support{margin-top:auto;display:flex;flex-direction:column;gap:.9rem;padding-top:1.25rem} .flow__supporttitle{ font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase; display:flex;align-items:center;gap:.5em;color:var(--fg-3); } .flow__supporttitle::before{content:"";width:.35em;height:.35em;border-radius:50%;background:var(--acc);flex:none} .flow__supporttitle--human::before{background:var(--fg-1)} .flow__list li{ font-size:.8125rem;color:var(--fg-1);line-height:1.7; padding-left:.9rem;position:relative; } .flow__list li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:1px;background:var(--fg-3)} .flow__hint{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding-top:1.1rem; } .flow__bar{position:relative;flex:1;height:1px;background:var(--line-0);max-width:280px} .flow__bar i{position:absolute;left:0;top:-1px;height:3px;width:14%;background:var(--acc);transition:transform .18s linear} /* ------------------------------------------------------------ 15 cost ---- */ .cost__grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;background:var(--line-0);border:1px solid var(--line-0); margin-top:clamp(3rem,6vw,5rem); } .costcard{ background:var(--paper-0); padding:clamp(1.75rem,3.2vw,3rem); display:flex;flex-direction:column;gap:1.1rem; position:relative;overflow:hidden; transition:background-color .6s var(--ease-out); } .costcard:hover{background:var(--paper-1)} .costcard__kicker{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-1)} .costcard__title{font-size:clamp(1.3rem,2.1vw,1.85rem);font-weight:640;letter-spacing:-0.035em;line-height:1.2;max-width:16ch} .costcard__desc{color:var(--fg-1);font-size:var(--fs-sm);line-height:1.72;max-width:42ch} .costcard__desc p+p{margin-top:.9em} .costcard__point{ margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--line-0); display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap; font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase; } .costcard__point b{color:var(--fg-3);font-weight:500;text-decoration:line-through;text-decoration-thickness:1px} .costcard__point em{font-style:normal;color:var(--acc-1);font-weight:600} .costcard__num{ position:absolute;right:clamp(1rem,2vw,1.75rem);top:clamp(1rem,2vw,1.5rem); font-family:var(--ff-mono);font-size:.6875rem;color:var(--fg-3);letter-spacing:.14em; } /* ------------------------------------------------------- 16 statement ---- */ .statement{ position:relative;background:var(--ink-0);overflow:hidden; padding-block:clamp(7rem,15vw,16rem); } .statement__glow{ width:min(85vw,1100px);aspect-ratio:1;left:50%;top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(59,91,255,.24),transparent 62%); filter:blur(120px); } .statement__in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:clamp(2rem,4vw,3.25rem)} .statement__big{max-width:14ch} .statement__big em{font-style:normal;color:var(--acc-1)} .statement__body{max-width:48ch;color:var(--fg-1);text-align:center;font-size:var(--fs-lead);line-height:1.62} .statement__body p+p{margin-top:1.1em} /* key message with 3-line mega type */ .keymsg{position:relative;overflow:hidden;padding-block:clamp(6rem,13vw,14rem);background:var(--ink-1)} .keymsg__type{display:grid;gap:0} .keymsg__type span{ font-size:clamp(3.2rem,13vw,13rem);font-weight:680;line-height:.88;letter-spacing:-0.06em; display:block; } .keymsg__type span:nth-child(2){padding-left:clamp(1rem,8vw,7rem);color:var(--fg-3)} .keymsg__type span:nth-child(3){padding-left:clamp(2rem,16vw,14rem);color:var(--acc-1)} .keymsg__body{ margin-top:clamp(2.5rem,5vw,4rem);margin-left:auto;max-width:42ch; color:var(--fg-1);font-size:var(--fs-lead);line-height:1.62; } .keymsg__body p+p{margin-top:1.05em} /* marquee */ .marq{ border-block:1px solid var(--line-0);overflow:hidden;padding-block:1.15rem; display:flex;gap:0;user-select:none; } .marq__row{display:flex;gap:0;flex:none;animation:marq 42s linear infinite;will-change:transform} .marq:hover .marq__row{animation-play-state:paused} .marq__row span{ display:inline-flex;align-items:center;gap:2.5rem;padding-right:2.5rem; font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase; color:var(--fg-2);white-space:nowrap; } .marq__row span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--acc);flex:none} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}} /* ------------------------------------------------------ 17 principles ---- */ .prin{border-top:1px solid var(--line-0);margin-top:clamp(3rem,6vw,5rem)} .prin__item{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4.5fr) minmax(0,4.5fr); gap:clamp(1rem,3vw,3rem); padding-block:clamp(1.9rem,3.6vw,3rem); border-bottom:1px solid var(--line-0); align-items:start;position:relative; } .prin__item::before{ content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(59,91,255,.07),transparent 55%); opacity:0;transition:opacity .55s var(--ease-out);pointer-events:none; } .prin__item:hover::before{opacity:1} .prin__num{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--fg-3);padding-top:.4rem} .prin__ttl{font-size:clamp(1.2rem,1.9vw,1.7rem);font-weight:620;letter-spacing:-0.035em;line-height:1.24;max-width:20ch} .prin__ttl small{ display:block;font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase; color:var(--acc-1);margin-bottom:.85rem;font-weight:500; } .prin__desc{color:var(--fg-1);font-size:var(--fs-sm);line-height:1.75;max-width:44ch;padding-top:.25rem} .prin__desc p+p{margin-top:.85em} /* ------------------------------------------------------------- 18 why ---- */ .why{position:relative;background:var(--ink-1);overflow:hidden} .why__grid{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px;background:var(--line-0);border:1px solid var(--line-0); margin-top:clamp(3rem,6vw,5rem); } .whycard{ background:var(--ink-1);padding:clamp(1.6rem,2.8vw,2.5rem); grid-column:span 2;display:flex;flex-direction:column;gap:1rem; transition:background-color .6s var(--ease-out);position:relative;overflow:hidden; min-height:clamp(290px,24vw,340px); } .whycard:nth-child(4),.whycard:nth-child(5){grid-column:span 3} .whycard:hover{background:var(--ink-2)} .whycard__kicker{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-1)} .whycard__ttl{font-size:clamp(1.16rem,1.55vw,1.5rem);font-weight:620;letter-spacing:-0.03em;line-height:1.26} .whycard__desc{color:var(--fg-1);font-size:var(--fs-sm);line-height:1.7} .whycard__desc p+p{margin-top:.85em} .whycard__pills{margin-top:auto;padding-top:1.25rem} /* ------------------------------------------------------- 19 portfolio ---- */ .work{position:relative} .work__list{border-top:1px solid var(--line-0);margin-top:clamp(3rem,6vw,5rem)} .work__item{ position:relative;display:block;border-bottom:1px solid var(--line-0); } .work__row{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2.4fr) minmax(0,3.6fr) minmax(0,3.2fr); gap:clamp(1rem,2.5vw,2.5rem); padding-block:clamp(1.5rem,2.8vw,2.1rem); align-items:center;position:relative;z-index:2; transition:padding-left .6s var(--ease-out),color .5s var(--ease-out); } .work__item:hover .work__row{padding-left:clamp(.75rem,1.6vw,1.5rem)} .work__item::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--acc); transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease-out);z-index:3; } .work__item:hover::after{transform:scaleX(1)} .work__idx{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--fg-3);font-variant-numeric:tabular-nums} .work__client{font-size:var(--fs-sm);color:var(--fg-2);font-weight:500;transition:color .5s var(--ease-out)} .work__item:hover .work__client{color:var(--acc-1)} .work__ttl{ font-size:clamp(1.28rem,2.3vw,2.05rem);font-weight:620;letter-spacing:-0.038em;line-height:1.18; } .work__ttl small{ display:block;font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-3);margin-top:.6rem;font-weight:500; } .work__meta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start} .work__desc{font-size:.8125rem;color:var(--fg-1);line-height:1.66;max-width:38ch} /* hover preview panel following the cursor. Two stacked layers: a generated gradient that always renders, and the real project screenshots on top. If an image is missing or fails to load the gradient simply stays visible, so the interaction never breaks. */ .workpeek{ position:fixed;z-index:800; width:clamp(240px,22vw,360px); aspect-ratio:1920/1201; /* the source screenshots' ratio */ border-radius:5px;overflow:hidden;pointer-events:none; opacity:0;transform:translate(-50%,-50%) scale(.92); transition:opacity .45s var(--ease-out),transform .55s var(--ease-out); border:1px solid var(--line-1); box-shadow:0 30px 80px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4); background:var(--ink-2); } .workpeek.on{opacity:1;transform:translate(-50%,-50%) scale(1)} .workpeek__art{position:absolute;inset:0;z-index:0} .workpeek__stack{position:absolute;inset:0;z-index:1} .workpeek__stack img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:top center; opacity:0;transition:opacity .55s var(--ease-out); } .workpeek__stack img.on{opacity:1} /* hairline so a light screenshot does not bleed into the page */ .workpeek::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); border-radius:inherit; } @media (hover:none),(pointer:coarse){.workpeek{display:none}} .work__cta{margin-top:clamp(2.5rem,5vw,4rem);display:flex;justify-content:flex-end} /* ------------------------------ 20 operation / technology / together ----- */ .split{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,6rem);align-items:start; } .split--tight{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .oper{position:relative;overflow:hidden;background:var(--ink-1)} .oper__big{ font-size:clamp(2.1rem,4.7vw,4.7rem);font-weight:680;line-height:1.02;letter-spacing:-0.05em; } .oper__big span{display:block} .oper__big span:last-child{color:var(--acc-1)} .oper__bars{ margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1rem;max-width:520px; } .oper__bar{display:grid;gap:.55rem} .oper__barhead{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)} .oper__bartrack{height:6px;background:var(--line-0);border-radius:3px;overflow:hidden} .oper__bartrack i{display:block;height:100%;border-radius:3px;background:var(--fg-3);width:0;transition:width 1.6s var(--ease-out)} .oper__bar--acc .oper__bartrack i{background:linear-gradient(90deg,var(--acc),var(--acc-1))} .in .oper__bar .oper__bartrack i{width:var(--w,50%)} .tech__cats{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--line-0);border:1px solid var(--line-0); margin-top:clamp(2.5rem,5vw,4rem); } .tech__cat{ background:var(--ink-0);padding:clamp(1.2rem,2.2vw,1.8rem); display:flex;flex-direction:column;gap:.7rem;min-height:120px; transition:background-color .55s var(--ease-out); } .tech__cat:hover{background:var(--ink-2)} .tech__cat b{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-0);font-weight:600} .tech__cat span{font-size:.8125rem;color:var(--fg-1);line-height:1.6} /* ------------------------------------------------- 21 contact & form ----- */ .contact{position:relative;overflow:hidden;background:var(--ink-0)} .contact__glow{ width:min(70vw,900px);aspect-ratio:1;left:-10%;bottom:-30%; background:radial-gradient(circle,rgba(59,91,255,.30),transparent 66%); } .contact__top{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,6rem);align-items:end; padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line-0); } .contact__title{max-width:15ch;font-size:clamp(2.2rem,4.7vw,4.7rem);line-height:1.06} .contact__mail{ display:inline-block;font-size:clamp(1.05rem,2vw,1.6rem);font-weight:560;letter-spacing:-0.03em; position:relative;padding-bottom:.3em;margin-top:1.75rem; } .contact__mail::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acc); transform:scaleX(1);transform-origin:left;transition:transform .55s var(--ease-out)} .contact__mail:hover::after{transform:scaleX(0);transform-origin:right} .form{margin-top:clamp(3rem,6vw,5rem);position:relative;z-index:2} .form__head{ display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(1.5rem,4vw,5rem);margin-bottom:clamp(2rem,4vw,3rem); } .form__grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.4vw,2rem) clamp(1.5rem,3vw,3rem); } .field{display:flex;flex-direction:column;gap:.6rem;position:relative} .field--full{grid-column:1/-1} .field label{ font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase; color:var(--fg-1);display:flex;align-items:center;gap:.4em; } .field label em{font-style:normal;color:var(--acc-1)} .field input,.field select,.field textarea{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-1); padding:.75rem 0;font-size:.9375rem;color:var(--fg-0);border-radius:0; transition:border-color .45s var(--ease-out); appearance:none;-webkit-appearance:none; } .field textarea{resize:vertical;min-height:130px;line-height:1.7} .field input::placeholder,.field textarea::placeholder{color:var(--fg-2);opacity:1} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--acc)} .field select{cursor:pointer;color:var(--fg-0)} .field select option{background:var(--ink-2);color:var(--fg-0)} .field .selwrap{position:relative;display:block} .field .selwrap::after{ content:"";position:absolute;right:2px;top:50%;width:7px;height:7px; border-right:1px solid var(--fg-2);border-bottom:1px solid var(--fg-2); transform:translateY(-70%) rotate(45deg);pointer-events:none; } .field__err{ font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase; color:#FF6B5E;min-height:.9rem;opacity:0;transition:opacity .3s ease; } .field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#FF6B5E} .field.invalid .field__err{opacity:1} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .form__foot{ margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.5rem 2rem; align-items:center;justify-content:space-between; } .check{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;max-width:52ch} .check input{position:absolute;opacity:0;width:0;height:0} .check__box{ width:17px;height:17px;border:1px solid var(--line-2);border-radius:2px;flex:none; margin-top:.28em;position:relative;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out); } .check__box::after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border-right:1.5px solid #fff;border-bottom:1.5px solid #fff; transform:rotate(45deg) scale(0);transition:transform .3s var(--ease-out); } .check input:checked + .check__box{background:var(--acc);border-color:var(--acc)} .check input:checked + .check__box::after{transform:rotate(45deg) scale(1)} .check input:focus-visible + .check__box{outline:2px solid var(--acc-1);outline-offset:3px} .check span{font-size:.8125rem;color:var(--fg-1);line-height:1.6} .check a{color:var(--fg-1);text-decoration:underline;text-underline-offset:3px} .form__status{ font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--fg-2);min-height:1rem; } .form__status.err{color:#FF6B5E} .form.sent .form__body{opacity:0;visibility:hidden;height:0;overflow:hidden} .form__done{ display:none;padding:clamp(2.5rem,5vw,4.5rem);border:1px solid var(--line-1);border-radius:4px; background:linear-gradient(135deg,rgba(59,91,255,.12),transparent 60%); text-align:center; } .form.sent .form__done{display:block} .form__done b{display:block;font-size:clamp(1.3rem,2.4vw,2rem);font-weight:640;letter-spacing:-0.035em;margin-bottom:.8rem} .form__done span{color:var(--fg-1);font-size:var(--fs-sm)} .btn[disabled]{opacity:.45;pointer-events:none} .btn.loading::after{ content:"";width:13px;height:13px;border-radius:50%; border:1.5px solid currentColor;border-top-color:transparent; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* --------------------------------------------------------- 22 footer ---- */ .footer{ background:var(--ink-1);border-top:1px solid var(--line-0); padding-block:clamp(3.5rem,7vw,6rem) clamp(2rem,3vw,2.5rem); } .footer__top{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap:clamp(2rem,4vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line-0); } .footer__brand{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:660;letter-spacing:-0.045em;line-height:1.1;margin-bottom:1.1rem} .footer__tag{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-1);margin-bottom:1.5rem;display:block} .footer__copy{color:var(--fg-1);font-size:var(--fs-sm);max-width:38ch;line-height:1.72} .footer__h{font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:1.25rem;display:block} .footer__nav li+li{margin-top:.6rem} .footer__nav a{font-size:.875rem;color:var(--fg-1);transition:color .4s var(--ease-out)} .footer__nav a:hover{color:var(--fg-0)} .footer__info{font-size:.8125rem;color:var(--fg-1);line-height:1.85} .footer__info b{display:block;color:var(--fg-1);font-weight:560;margin-bottom:.5rem} .footer__mail{ display:inline-block;font-size:1rem;font-weight:560;color:var(--fg-0); border-bottom:1px solid var(--acc);padding-bottom:.2em;margin-bottom:1.5rem; } .footer__bottom{ margin-top:clamp(1.75rem,3vw,2.5rem);display:flex;flex-wrap:wrap;gap:1rem 2rem; justify-content:space-between;align-items:center; } .footer__bottom small,.footer__bottom a{ font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3); } .footer__bottom a:hover{color:var(--fg-1)} .totop{display:inline-flex;align-items:center;gap:.5em} .totop .arw{transition:transform .5s var(--ease-out)} .totop:hover .arw{transform:translateY(-3px)} /* ------------------------------------------------------ 23 responsive ---- */ @media (max-width:1180px){ .aigrid{grid-template-columns:repeat(2,minmax(0,1fr))} .why__grid{grid-template-columns:repeat(4,minmax(0,1fr))} .whycard{grid-column:span 2} .whycard:nth-child(4),.whycard:nth-child(5){grid-column:span 2} .tech__cats{grid-template-columns:repeat(3,minmax(0,1fr))} .svc__item{grid-template-columns:minmax(0,1fr) minmax(0,7fr)} .svc__scope{grid-column:2} .work__row{grid-template-columns:minmax(0,.7fr) minmax(0,2fr) minmax(0,4fr) minmax(0,3fr)} } @media (max-width:900px){ .nav{display:none} .burger{display:block} .header__cta .btn{display:none} .shead{grid-template-columns:1fr;gap:1.5rem} .shead__label{position:static} .intro__grid,.split,.split--tight,.contact__top,.form__head,.hero__cols{grid-template-columns:1fr} .hero__cols{gap:2.25rem} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stats li:nth-child(2n){border-right:0} .stats li:nth-child(n+3){border-top:1px solid var(--line-0)} .cost__grid{grid-template-columns:1fr} .prin__item{grid-template-columns:minmax(0,.6fr) minmax(0,9fr);gap:1rem 1.5rem} .prin__desc{grid-column:2} .footer__top{grid-template-columns:1fr;gap:2.5rem} .work__row{grid-template-columns:minmax(0,.6fr) minmax(0,9fr);gap:.75rem 1.25rem;align-items:start} .work__client{grid-column:2} .work__ttl{grid-column:2} .work__meta{grid-column:2;padding-top:.35rem} .form__grid{grid-template-columns:1fr} .tech__cats{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .aigrid{grid-template-columns:1fr} .why__grid{grid-template-columns:1fr} .whycard,.whycard:nth-child(4),.whycard:nth-child(5){grid-column:span 1} .svc__item{grid-template-columns:1fr;gap:1.1rem} .svc__scope{grid-column:1} .svc__num{padding-top:0} .prin__item{grid-template-columns:1fr;gap:.85rem} .prin__desc,.work__client,.work__ttl,.work__meta{grid-column:1} .work__row{grid-template-columns:1fr;gap:.6rem} .hero{min-height:92svh} .hero__foot{flex-direction:column;align-items:flex-start;gap:1.25rem} .form__foot{flex-direction:column;align-items:stretch} .form__foot .btn{justify-content:center} .keymsg__type span:nth-child(2){padding-left:1rem} .keymsg__type span:nth-child(3){padding-left:2rem} .stats{grid-template-columns:1fr} .stats li{border-right:0;border-top:1px solid var(--line-0)} .stats li:first-child{border-top:0} .tech__cats{grid-template-columns:1fr} } /* ------------------------------------------- 24 reduced motion & print ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } [data-reveal],[data-clip],[data-line]{opacity:1!important;transform:none!important;clip-path:none!important} .line > span{transform:none!important} .grain{display:none} .cursor{display:none} } @media print{ .header,.menu,.cursor,.grain,.progress,.preload,.workpeek,.hero__bg{display:none!important} body{background:#fff;color:#000} .section{padding-block:2rem} } /* ------------------------------------- 25 responsive copy swap (hero) ---- */ .d-mob{display:none} @media (max-width:640px){ .d-full{display:none} .d-mob{display:block} p.d-mob,span.d-mob{display:block} .eyebrow .d-mob{display:inline} .eyebrow .d-full{display:none} } @media (min-width:641px){ .eyebrow .d-full{display:inline} } /* --------------------------------------------- 26 misc refinements ------- */ .hero__title em{position:relative} .statement__big em{font-style:normal;color:var(--acc-1)} /* select needs an explicit dark background on Windows/Chrome */ .field select:not(:placeholder-shown){color:var(--fg-0)} .field select:invalid{color:var(--fg-3)} /* keep the flow track keyboard-focusable without an ugly ring on click */ .flow__track:focus{outline:none} .flow__track:focus-visible{outline:2px solid var(--acc-1);outline-offset:-2px} /* work list: give the row a hover tint on dark */ .work__item::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(59,91,255,.08),transparent 60%); opacity:0;transition:opacity .55s var(--ease-out); } .work__item:hover::before{opacity:1} /* tighten the giant key-message block on very wide screens */ @media (min-width:1600px){ .keymsg__type span{letter-spacing:-0.065em} } /* --------------------------------- 27 large-headline latin/hangul mix ---- */ /* A Latin word butted straight against Hangul reads cramped at display size. */ .mix{margin-left:.06em} /* full-width stacked CTAs on the smallest screens */ @media (max-width:480px){ .hero__actions{gap:.65rem} .hero__actions .btn{flex:1 1 100%;justify-content:center} } /* invalid state for the privacy consent checkbox */ .check.invalid .check__box{border-color:#FF6B5E;box-shadow:0 0 0 3px rgba(255,107,94,.14)}