.section{position:relative;padding:126px 0}.section-head{max-width:780px;margin-bottom:62px}.section-head--wide{max-width:930px}.section-head--center{margin-inline:auto;text-align:center}.section-label{margin:0 0 12px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.18em}.section-head h2{margin:0;font-size:clamp(44px,5.5vw,72px);line-height:1.12;letter-spacing:-.06em}.section-head>p:last-child{max-width:700px;margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.85}.section-head--center>p:last-child{margin-inline:auto}[data-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity .75s var(--ease),transform .75s var(--ease)}[data-reveal].is-visible{opacity:1;transform:none}
/* HERO */
.hero{position:relative;min-height:900px;padding:156px 0 56px;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(82,120,245,.09),transparent 28%),linear-gradient(180deg,#fffdf6 0%,#fff 100%)}.hero::before{content:"";position:absolute;left:-160px;bottom:-170px;width:430px;height:390px;background:var(--coral-soft);border-radius:48% 52% 43% 57%/56% 38% 62% 44%;transform:rotate(19deg)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:55px;align-items:center}.hero-eyebrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}.hero-eyebrow span{padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.09em}.hero-eyebrow span:nth-child(1){color:#355fc3;background:var(--blue-soft)}.hero-eyebrow span:nth-child(2){color:#2a7955;background:var(--green-soft)}.hero-eyebrow span:nth-child(3){color:#7756b5;background:var(--purple-soft)}.hero h1{margin:0;font-size:clamp(64px,7.3vw,100px);line-height:.99;letter-spacing:-.075em}.hero h1 em{color:var(--blue);font-style:normal}.hero-lead{max-width:650px;margin:30px 0 0;color:#4d5b66;font-size:18px;font-weight:700}.hero-sub{margin:10px 0 0;color:var(--muted);font-size:16px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.hero-stage{position:relative;height:610px;isolation:isolate}.hero-blob{position:absolute;inset:5% 1% 5% 7%;z-index:-2;background:linear-gradient(145deg,var(--blue-soft),#f9fbff 56%,var(--green-soft));border-radius:46% 54% 46% 54%/54% 43% 57% 46%;transform:rotate(-3deg);transition:transform .2s ease}.hero-screen{position:absolute;left:50%;top:51%;z-index:2;width:82%;min-width:470px;background:#fff;border:1px solid rgba(177,194,207,.72);border-radius:23px;box-shadow:0 28px 70px rgba(35,56,73,.14);transform:translate(-50%,-50%) rotate(-2deg);overflow:hidden}.screen-top{height:50px;padding:0 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #e9eef2}.screen-dots{display:flex;gap:5px}.screen-dots i{width:7px;height:7px;border-radius:50%;background:#c7d2db}.screen-url{color:#82909c;font-size:12px;font-weight:800}.screen-body{display:grid;grid-template-columns:1fr 58px 1fr;gap:12px;padding:23px;align-items:center}.screen-caption{display:block;margin-bottom:10px;color:#8d9ba6;font-size:11px;font-weight:900;letter-spacing:.12em}.manual-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;margin-top:9px;padding:10px;background:#f7f9fb;border-radius:11px;border:1px solid #edf1f4;transition:.35s var(--ease)}.manual-row svg{width:24px;height:24px;fill:none;stroke:#70818e;stroke-width:2}.manual-row span{font-size:13px;font-weight:800}.manual-row b{padding:4px 7px;color:#9c6570;background:#fff0f1;border-radius:999px;font-size:10px}.screen-convert{display:grid;place-items:center;gap:5px;color:var(--blue)}.screen-convert svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.5}.screen-convert span{font-size:10px;font-weight:900;letter-spacing:.12em}.screen-after{display:grid;gap:9px}.after-card{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;padding:11px;background:#f6fbf8;border:1px solid #dfeee6;border-radius:12px;transition:.35s var(--ease)}.after-card svg{width:26px;height:26px;fill:none;stroke:var(--green);stroke-width:2}.after-card b,.after-card small{display:block}.after-card b{font-size:13px}.after-card small{color:#7f9187;font-size:10px;font-weight:800;letter-spacing:.08em}.hero-stage.is-automating .manual-row{opacity:.56;transform:translateX(5px)}.hero-stage.is-automating .after-card{transform:translateX(-5px);box-shadow:0 8px 18px rgba(59,119,84,.08)}.hero-stage.is-automating .screen-convert svg{animation:arrowPulse .65s ease-in-out 2}.hero-object{position:absolute;z-index:4;min-width:132px;padding:14px 15px 14px 55px;background:#fff;border:1px solid rgba(205,217,225,.9);border-radius:18px;box-shadow:0 15px 35px rgba(36,54,70,.1);transition:translate .18s ease;animation:objectFloat 5s ease-in-out infinite alternate}.object-icon{position:absolute;left:13px;top:13px;width:31px;height:31px;display:grid;place-items:center;border-radius:10px}.object-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.hero-object b,.hero-object small{display:block}.hero-object b{font-size:13px}.hero-object small{margin-top:1px;color:#84909a;font-size:10px;font-weight:900;letter-spacing:.06em}.hero-object--pdf{top:5%;right:4%;transform:rotate(5deg);animation-delay:-.7s}.hero-object--pdf .object-icon{color:#a67016;background:var(--yellow-soft)}.hero-object--voice{left:-2%;top:22%;transform:rotate(-6deg);animation-delay:-1.5s}.hero-object--voice .object-icon{color:#7657b5;background:var(--purple-soft)}.hero-object--web{right:-4%;bottom:19%;transform:rotate(-5deg);animation-delay:-2.2s}.hero-object--web .object-icon{color:#355fc3;background:var(--blue-soft)}.hero-object--excel{left:6%;bottom:4%;transform:rotate(5deg);animation-delay:-2.9s}.hero-object--excel .object-icon{color:#277650;background:var(--green-soft)}.hero-pulse{position:absolute;z-index:-1;border-radius:50%;opacity:.65}.hero-pulse--one{right:3%;top:24%;width:86px;height:86px;background:var(--yellow);filter:blur(1px)}.hero-pulse--two{left:10%;bottom:20%;width:54px;height:54px;border:9px solid var(--coral);background:transparent}.hero-edge{position:absolute;z-index:1;pointer-events:none}.hero-edge svg{fill:none;stroke:currentColor;stroke-width:2}.hero-edge--folder{left:-46px;top:34%;width:115px;height:115px;color:#7d60bb;transform:rotate(-12deg)}.hero-edge--folder svg{width:100%;height:100%;fill:var(--purple-soft);stroke:#7d60bb}.hero-edge--wifi{right:-42px;top:13%;width:100px;height:100px;color:#2c7c58;transform:rotate(12deg)}.hero-edge--wifi svg{width:100%;height:100%;stroke:#2c7c58}.hero-edge--cursor{right:22%;bottom:-10px;width:75px;height:75px;color:var(--coral);transform:rotate(-8deg)}.hero-edge--cursor svg{width:100%;height:100%;fill:var(--coral-soft);stroke:var(--coral)}.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;margin-top:55px;color:#8b98a2;font-size:11px;font-weight:800;letter-spacing:.08em}.hero-foot a{display:flex;gap:8px}.hero-foot b{color:var(--blue)}@keyframes objectFloat{to{margin-top:10px}}@keyframes arrowPulse{50%{transform:translateX(6px)}}
/* LOOP */
.loop-band{position:relative;z-index:5;overflow:hidden;padding:21px 0;color:#fff;background:var(--blue);clip-path:polygon(0 8%,100% 0,100% 92%,0 100%)}.loop-track{display:flex;width:max-content;gap:28px;align-items:center;white-space:nowrap;animation:loopMove 24s linear infinite}.loop-track span{font-size:30px;font-weight:900;letter-spacing:-.04em}.loop-track i{color:var(--yellow);font-style:normal;font-size:15px}@keyframes loopMove{to{transform:translateX(-50%)}}
/* PROBLEM */
.problem-section{overflow:hidden;background:#fff}.problem-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.problem-card{position:relative;min-height:520px;padding:28px;border-radius:34px;border:1px solid rgba(204,217,226,.76);overflow:hidden}.problem-card--sky{background:var(--sky)}.problem-card--coral{background:var(--coral-soft)}.problem-card--mint{background:var(--green-soft)}.problem-card--violet{background:var(--purple-soft)}.problem-visual{position:relative;height:220px;display:grid;place-items:center;margin:-5px 0 18px}.problem-visual>svg{width:130px;height:130px;fill:none;stroke:var(--ink);stroke-width:1.55;opacity:.9}.mini-object{position:absolute;width:82px;height:82px;display:grid;place-items:center;background:#fff;border:1px solid rgba(171,190,204,.65);border-radius:24px;box-shadow:0 14px 30px rgba(34,55,70,.08)}.mini-object svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.9}.mo-browser{right:10%;top:5%;color:var(--blue);transform:rotate(7deg)}.mo-cursor{right:8%;bottom:5%;color:var(--coral);transform:rotate(-8deg)}.mo-folder{left:7%;bottom:3%;color:var(--green);transform:rotate(-6deg)}.mo-pdf{right:10%;top:5%;color:var(--purple);transform:rotate(7deg)}.problem-no{display:block;margin-bottom:11px;color:rgba(23,33,43,.48);font-size:12px;font-weight:900;letter-spacing:.12em}.problem-card h3{margin:0;font-size:29px;line-height:1.3;letter-spacing:-.04em}.problem-card>p{margin:14px 0 0;color:#586772;font-size:16px}.problem-shift{position:absolute;left:28px;right:28px;bottom:26px;display:flex;align-items:center;gap:10px;padding-top:17px;border-top:1px solid rgba(23,33,43,.1);font-size:13px}.problem-shift span{color:#788691}.problem-shift b{color:#99a4ad}.problem-shift strong{font-size:14px}.problem-banner{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin-top:48px;padding:27px 31px;background:var(--yellow-soft);border:1px solid #efde9d;border-radius:25px 25px 25px 8px}.banner-stamp{width:72px;height:72px;display:grid;place-items:center;color:#8b640f;background:#fff;border-radius:50%;font-size:11px;font-weight:900;letter-spacing:.1em}.problem-banner strong{display:block;color:#234db6;font-size:26px;line-height:1.3}.problem-banner p{margin:5px 0 0;color:#6a705f;font-size:15px}.problem-banner>svg{width:58px;height:58px;fill:var(--yellow);stroke:#9c741e;stroke-width:1}.edge-object{position:absolute;pointer-events:none}.edge-object svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7}.edge-object--problem{right:-55px;top:115px;width:130px;height:130px;color:var(--blue);opacity:.28;transform:rotate(10deg)}
/* SERVICE */
.service-section{position:relative;padding:135px 0;overflow:hidden;background:linear-gradient(180deg,#f8faff 0%,#fff 100%)}.service-orb{position:absolute;border-radius:50%;pointer-events:none}.service-orb--left{left:-100px;top:12%;width:230px;height:230px;background:var(--green-soft)}.service-orb--right{right:-80px;bottom:8%;width:190px;height:190px;background:var(--coral-soft)}.service-scroller{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.service-card{position:relative;min-height:500px;padding:34px;overflow:hidden;border:1px solid rgba(199,214,225,.75);border-radius:42px 42px 42px 10px}.service-card:nth-child(even){border-radius:42px 42px 10px 42px}.service-card--blue{background:var(--blue-soft)}.service-card--green{background:var(--green-soft)}.service-card--yellow{background:var(--yellow-soft)}.service-card--purple{background:var(--purple-soft)}.service-top{display:flex;align-items:center;justify-content:space-between}.service-top span{font-size:12px;font-weight:900}.service-top svg{width:88px;height:88px;fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.85;transform:rotate(4deg)}.service-verb{margin:12px 0 0;font-size:clamp(52px,5.2vw,74px);line-height:1;font-weight:900;letter-spacing:-.07em}.service-card h3{margin:30px 0 0;font-size:25px}.service-card>p:not(.service-verb){max-width:500px;margin:13px 0 0;color:#5d6a74;font-size:16px}.service-card ul{display:flex;flex-wrap:wrap;gap:7px;margin:28px 0 0;padding:0;list-style:none}.service-card li{padding:7px 11px;background:rgba(255,255,255,.72);border:1px solid rgba(181,199,211,.65);border-radius:999px;font-size:13px;font-weight:800}.service-swipe{display:none}.oversize-message{overflow:hidden;padding:18px 0 32px;background:#fff}.oversize-message>div{width:max-content;white-space:nowrap;font-size:clamp(72px,9vw,140px);font-weight:900;line-height:1;letter-spacing:-.08em;transform:translateX(-7%);color:var(--ink)}.oversize-message span{color:var(--coral)}
/* TOOLS */
.tools-section{overflow:hidden;background:#fff}.project-list{display:grid;gap:28px}.project{display:grid;grid-template-columns:.75fr 1.25fr;gap:42px;align-items:center;min-height:450px;padding:38px;border-radius:38px;overflow:hidden}.project--blue{background:var(--blue-soft)}.project--green{background:var(--green-soft)}.project--yellow{background:var(--yellow-soft)}.project--purple{background:var(--purple-soft)}.project--reverse .project-copy{order:2}.project--reverse .project-crop{order:1}.project-tag{display:inline-flex;padding:6px 10px;background:rgba(255,255,255,.75);border-radius:999px;color:#65737e;font-size:11px;font-weight:900;letter-spacing:.1em}.project-copy h3{margin:18px 0 0;font-size:clamp(34px,3.8vw,52px);line-height:1.18;letter-spacing:-.05em}.project-copy p{margin:15px 0 24px;color:#596872;font-size:16px}.project-copy a{display:inline-flex;gap:7px;padding-bottom:2px;border-bottom:2px solid currentColor;font-size:14px;font-weight:900}.project-copy a span{transition:transform .2s}.project-copy a:hover span{transform:translateX(4px)}.project-crop{position:relative;min-height:350px}.mock-browser{position:absolute;left:50%;top:50%;width:85%;padding:17px;background:#fff;border:1px solid rgba(171,190,204,.68);border-radius:18px;box-shadow:0 20px 45px rgba(40,62,78,.11);transform:translate(-45%,-50%) rotate(-2deg);transition:transform .35s var(--ease)}.project:hover .mock-browser{transform:translate(-47%,-52%) rotate(-1deg)}.mock-top{display:flex;gap:5px;padding-bottom:12px;border-bottom:1px solid #edf1f4}.mock-top i{width:7px;height:7px;border-radius:50%;background:#ced8e0}.mock-filter{display:flex;gap:7px;margin:15px 0}.mock-filter span{flex:1;padding:8px;background:#f4f7f9;border-radius:8px;color:#71838f;font-size:10px;text-align:center}.mock-results b{display:block;height:17px;margin-top:8px;border-radius:5px;background:linear-gradient(90deg,#dce7ee 0 32%,#f0f4f7 32%)}.project-chip{position:absolute;z-index:3;padding:8px 11px;background:#fff;border-radius:999px;box-shadow:0 9px 22px rgba(37,57,74,.1);font-size:11px;font-weight:900}.pc1{left:0;top:12%;transform:rotate(-7deg)}.pc2{right:0;top:19%;color:#fff;background:var(--blue);transform:rotate(6deg)}.pc3{right:8%;bottom:4%;transform:rotate(-3deg)}.project-crop--voice{display:grid;grid-template-columns:1fr .8fr;gap:20px;align-items:center}.voice-wave{height:170px;display:flex;align-items:center;justify-content:center;gap:8px}.voice-wave i{width:11px;height:32%;background:var(--green);border-radius:99px;animation:wave 1.4s ease-in-out infinite alternate}.voice-wave i:nth-child(2n){height:80%;animation-delay:-.3s}.voice-wave i:nth-child(3n){height:55%;animation-delay:-.6s}.transcript{padding:24px;background:#fff;border:1px solid rgba(174,198,184,.7);border-radius:18px;box-shadow:0 17px 38px rgba(38,72,52,.09);transform:rotate(4deg)}.transcript small{color:#57886e;font-size:11px;font-weight:900;letter-spacing:.1em}.transcript span{display:block;height:8px;margin-top:12px;background:#e2ece6;border-radius:99px}.project-crop--ocr{display:grid;grid-template-columns:1fr 54px 1fr;gap:12px;align-items:center;padding:0 7%}.ocr-input,.ocr-output{padding:26px;background:#fff;border:1px solid rgba(203,188,150,.7);border-radius:18px;box-shadow:0 17px 38px rgba(76,62,24,.09)}.ocr-input{transform:rotate(-4deg)}.ocr-output{transform:rotate(4deg)}.ocr-input small,.ocr-output small{color:#9d7b2d;font-size:11px;font-weight:900}.ocr-input strong{display:block;margin-top:20px;font-size:38px;line-height:1.05}.ocr-output span{display:block;height:8px;margin-top:12px;background:#eee6cf;border-radius:99px}.ocr-arrow{width:50px;height:50px;fill:none;stroke:var(--ink);stroke-width:2}.project-crop--sales{display:grid;place-items:center}.sales-tags{position:absolute;top:6%;z-index:3;display:flex;gap:7px}.sales-tags span{padding:7px 11px;color:#6d50a8;background:#fff;border-radius:999px;font-size:11px;font-weight:900}.sales-sheet{width:78%;padding:20px;background:#fff;border:1px solid rgba(192,181,213,.7);border-radius:18px;box-shadow:0 18px 42px rgba(68,49,104,.1);transform:translateX(5%) rotate(-2deg)}.sales-sheet i{display:block;height:24px;margin-top:8px;border-radius:5px;background:linear-gradient(90deg,#ddd5ef 0 28%,transparent 28% 31%,#f0ebf8 31% 72%,transparent 72% 75%,#ded5f0 75%)}.mini-tools{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:38px;padding:25px 28px;background:var(--paper);border:1px solid var(--line);border-radius:20px}.mini-tools>div span{display:block;color:#8c99a3;font-size:11px;font-weight:900;letter-spacing:.12em}.mini-tools>div strong{display:block;margin-top:3px;font-size:16px}.mini-tools nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.mini-tools nav a{padding:8px 11px;background:#fff;border-radius:999px;font-size:13px;font-weight:800}.edge-object--tools{left:-55px;top:170px;width:130px;height:130px;color:var(--purple);opacity:.25;transform:rotate(-12deg)}@keyframes wave{to{transform:scaleY(.48)}}
/* FLOW */
.flow-section{position:relative;padding:130px 0;overflow:hidden;background:linear-gradient(180deg,#eff9f3 0%,#f8fcfa 100%)}.flow-path{display:grid;grid-template-columns:1fr 62px 1fr 62px 1fr 62px 1fr;align-items:center}.flow-step{min-height:250px;padding:26px;background:#fff;border:1px solid #dbe9e0;border-radius:38px 38px 38px 10px}.flow-step:nth-of-type(even){border-radius:38px 38px 10px 38px}.flow-step>span{color:#8b9891;font-size:12px;font-weight:900;letter-spacing:.1em}.flow-icon{width:62px;height:62px;display:grid;place-items:center;margin-top:26px;background:var(--green-soft);border-radius:50%}.flow-icon svg{width:34px;height:34px;fill:none;stroke:var(--green);stroke-width:1.8}.flow-step h3{margin:18px 0 0;font-size:27px}.flow-step p{margin:7px 0 0;color:#67766d;font-size:15px}.flow-connector{display:grid;place-items:center}.flow-connector svg{width:34px;height:34px;fill:none;stroke:#85ad96;stroke-width:2}.flow-callout{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:48px;padding:27px 30px;background:var(--yellow);border-radius:24px 24px 24px 8px}.flow-callout>svg{width:54px;height:54px;fill:#ffe59b;stroke:#8e6718;stroke-width:1}.flow-callout span{display:block;color:#786024;font-size:11px;font-weight:900;letter-spacing:.12em}.flow-callout strong{display:block;margin-top:4px;font-size:18px}.flow-edge{position:absolute;right:-52px;bottom:45px;width:150px;height:150px;color:var(--green);opacity:.17;transform:rotate(15deg)}.flow-edge svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
/* STYLE */
.style-section{background:#fff}.style-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:84px;align-items:start}.style-head{position:sticky;top:130px;margin-bottom:0}.style-list{border-top:1px solid var(--line)}.style-list article{display:grid;grid-template-columns:32px 1fr;gap:18px;padding:31px 0;border-bottom:1px solid var(--line)}.style-dot{width:14px;height:14px;margin-top:9px;border-radius:50%}.sd-blue{background:var(--blue)}.sd-green{background:var(--green)}.sd-yellow{background:var(--yellow)}.sd-purple{background:var(--purple)}.style-list h3{margin:0;font-size:23px}.style-list p{margin:6px 0 0;color:var(--muted);font-size:16px}
/* FAQ */
.faq-section{position:relative;padding:132px 0;overflow:hidden;background:linear-gradient(180deg,#f4efff 0%,#faf8ff 100%)}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px;align-items:start}.faq-head{position:sticky;top:125px;margin-bottom:0}.faq-list{position:relative;z-index:2}.faq-item{border-top:1px solid rgba(118,94,159,.2)}.faq-item:last-child{border-bottom:1px solid rgba(118,94,159,.2)}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;color:var(--ink);background:transparent;text-align:left;cursor:pointer}.faq-question span{font-size:19px;font-weight:800;line-height:1.55}.faq-question b{margin-right:8px;color:var(--purple);font-size:20px}.faq-question i{position:relative;flex:0 0 38px;width:38px;height:38px;background:#fff;border:1px solid #d9cfed;border-radius:50%;transition:.28s var(--ease)}.faq-question i::before,.faq-question i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--purple);border-radius:2px;transform:translate(-50%,-50%);transition:.28s var(--ease)}.faq-question i::after{transform:translate(-50%,-50%) rotate(90deg)}.faq-item.is-open .faq-question i{background:var(--purple)}.faq-item.is-open .faq-question i::before,.faq-item.is-open .faq-question i::after{background:#fff}.faq-item.is-open .faq-question i::after{transform:translate(-50%,-50%) rotate(0)}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--ease)}.faq-answer>div{overflow:hidden}.faq-answer p,.faq-answer blockquote{max-width:760px;color:#59636e;font-size:16px}.faq-answer p{margin:0 0 20px}.faq-answer blockquote{margin:0 0 18px;padding:16px 18px;background:#fff;border-left:4px solid var(--purple);border-radius:0 12px 12px 0;font-weight:800}.faq-item.is-open .faq-answer{grid-template-rows:1fr}.faq-edge{position:absolute;pointer-events:none}.faq-edge--q{left:-18px;top:9%;color:rgba(153,120,220,.16);font-size:230px;font-weight:900;line-height:1;transform:rotate(-12deg)}.faq-edge--wifi{right:-52px;bottom:8%;width:150px;height:150px;color:var(--purple);opacity:.15;transform:rotate(12deg)}.faq-edge--wifi svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
/* CONTACT */
.contact-section{position:relative;padding:132px 0;overflow:hidden;background:radial-gradient(circle at 10% 12%,rgba(82,120,245,.09),transparent 22%),radial-gradient(circle at 92% 82%,rgba(242,154,88,.13),transparent 23%),#fff8ef}.contact-wrap{position:relative;z-index:2}.contact-head{margin-bottom:56px}.contact-form{position:relative;width:min(100%,850px);margin-inline:auto;padding:42px;background:#fff;border:1px solid var(--line);border-radius:34px 34px 34px 10px;box-shadow:var(--shadow)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-field{margin-bottom:20px}.form-field label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;font-weight:900}.form-field label span{color:var(--blue);font-size:12px}.form-field input,.form-field select,.form-field textarea{width:100%;padding:14px 15px;color:var(--ink);background:#f8fafb;border:1px solid #dbe4e9;border-radius:12px;outline:0;font-size:16px}.form-field input,.form-field select{min-height:52px}.form-field textarea{min-height:200px;resize:vertical}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(82,120,245,.08)}.form-privacy{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:14px}.form-privacy input{margin-top:7px}.form-submit{width:100%;display:grid;grid-template-columns:1fr auto;margin-top:28px;padding:20px 23px;color:#fff;background:var(--ink);border-radius:15px;cursor:pointer;text-align:left;transition:.25s var(--ease)}.form-submit:hover{background:var(--blue);transform:translateY(-2px)}.form-submit>span:first-child{grid-column:1/-1;margin-bottom:4px;color:rgba(255,255,255,.56);font-size:11px;font-weight:900;letter-spacing:.14em}.form-submit strong{font-size:16px}.form-status{margin:10px 0 0;color:var(--muted);font-size:14px}.form-status.is-error{color:#b94343}.form-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}.contact-object{position:absolute;pointer-events:none}.contact-object svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}.contact-object--mail{left:-55px;top:20%;width:150px;height:150px;color:var(--orange);opacity:.25;transform:rotate(-12deg)}.contact-object--cursor{right:-30px;bottom:12%;width:120px;height:120px;color:var(--blue);opacity:.22;transform:rotate(10deg)}
/* COMPANY */
.company-section{padding:96px 0;background:#fff}.company-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:75px;align-items:start}.company-brand{display:flex;align-items:center;gap:18px}.company-mark{width:86px;height:86px;display:grid;place-items:center;color:#fff;background:var(--ink);border-radius:26px 26px 26px 8px;font-size:38px;font-weight:900;transform:rotate(-3deg)}.company-brand p{margin:0;color:#8b98a2;font-size:11px;font-weight:900;letter-spacing:.14em}.company-brand h2{margin:3px 0 0;font-size:34px}.company-table{margin:0;border-top:1px solid var(--line)}.company-table>div{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:19px 0;border-bottom:1px solid var(--line)}.company-table dt{color:#7b8994;font-size:14px;font-weight:800}.company-table dd{margin:0;font-size:16px;font-weight:700}
/* BP */
@media(min-width:1440px){:root{--container:1280px}.hero-grid{grid-template-columns:.9fr 1.1fr}.hero-stage{height:650px}.hero-screen{width:84%}.problem-card{min-height:540px}.project{padding:42px}}
@media(max-width:1200px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);gap:35px}.hero h1{font-size:clamp(60px,7vw,86px)}.hero-stage{height:570px}.hero-screen{min-width:440px}.service-card{min-height:480px}.project{gap:32px}.flow-path{grid-template-columns:1fr 46px 1fr 46px 1fr 46px 1fr}.faq-grid{gap:50px}}
@media(max-width:1024px){.section{padding:105px 0}.section-head h2{font-size:clamp(42px,6.4vw,62px)}.hero{min-height:auto;padding-top:125px}.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:780px}.hero-stage{width:min(100%,760px);height:590px;margin:15px auto 0}.hero-screen{width:78%}.hero-edge--folder{top:28%}.hero-foot{margin-top:22px}.problem-grid{grid-template-columns:1fr 1fr}.problem-card{min-height:510px}.service-card{min-height:470px}.project{grid-template-columns:1fr;gap:25px}.project--reverse .project-copy,.project--reverse .project-crop{order:initial}.project-crop{min-height:330px}.flow-path{grid-template-columns:1fr 1fr;gap:16px}.flow-connector{display:none}.style-grid{gap:48px}.faq-grid{grid-template-columns:1fr}.faq-head{position:static;margin-bottom:45px;max-width:760px}.contact-object--mail{left:-78px}.company-grid{gap:45px}}
@media(max-width:768px){.section{padding:88px 0}.section-head{margin-bottom:45px}.section-head h2{font-size:42px}.section-head>p:last-child{font-size:16px}.hero{padding-top:108px}.hero h1{font-size:clamp(48px,13.2vw,68px)}.hero-lead{font-size:16px}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.hero-stage{height:520px;width:112%;margin-left:-6%}.hero-screen{width:76%;min-width:0}.screen-body{grid-template-columns:1fr 44px 1fr;padding:16px}.manual-row{grid-template-columns:30px 1fr;padding:8px}.manual-row b{display:none}.manual-row span,.after-card b{font-size:11px}.after-card{grid-template-columns:34px 1fr;padding:9px}.after-card small{font-size:8px}.hero-object{min-width:116px;padding:12px 12px 12px 48px}.hero-object--voice{left:0}.hero-object--web{right:0}.hero-object--excel{left:8%}.hero-object--pdf{right:5%}.hero-edge--folder{display:none}.hero-foot{font-size:10px}.loop-track span{font-size:25px}.problem-grid{grid-template-columns:1fr}.problem-card{min-height:500px}.problem-banner{grid-template-columns:auto 1fr}.problem-banner>svg{display:none}.problem-banner strong{font-size:22px}.service-section{padding:95px 0}.service-scroller{display:flex;gap:15px;overflow-x:auto;margin-inline:-18px;padding:5px 18px 24px;scroll-snap-type:x mandatory;scrollbar-width:none}.service-scroller::-webkit-scrollbar{display:none}.service-card{flex:0 0 82vw;min-height:475px;scroll-snap-align:center}.service-swipe{display:block;margin:0;color:#8a97a1;font-size:11px;font-weight:900;letter-spacing:.14em;text-align:right}.oversize-message>div{font-size:72px}.project{padding:24px;border-radius:28px}.project-crop{min-height:280px}.project-crop--ocr{padding:0}.mini-tools{flex-direction:column;align-items:flex-start}.mini-tools nav{justify-content:flex-start}.flow-path{grid-template-columns:1fr 1fr}.flow-callout{grid-template-columns:auto 1fr}.flow-callout .button{grid-column:1/-1;width:100%}.style-grid{grid-template-columns:1fr}.style-head{position:static;margin-bottom:25px}.faq-question span{font-size:18px}.faq-answer p,.faq-answer blockquote{font-size:15px}.contact-form{padding:28px 22px}.form-row{grid-template-columns:1fr;gap:0}.company-grid{grid-template-columns:1fr}.company-table>div{grid-template-columns:110px 1fr}}
@media(max-width:480px){.section{padding:74px 0}.section-head h2{font-size:36px}.section-head>p:last-child{font-size:15px}.hero h1{font-size:46px}.hero-lead{font-size:15px}.hero-stage{height:470px;width:120%;margin-left:-10%}.hero-screen{width:74%;top:50%}.screen-top{height:42px}.screen-url{font-size:9px}.screen-body{grid-template-columns:1fr 32px 1fr;gap:6px;padding:12px}.screen-caption{font-size:8px}.manual-row svg,.after-card svg{width:20px;height:20px}.manual-row span,.after-card b{font-size:9px}.screen-convert span{font-size:7px}.screen-convert svg{width:24px}.hero-object{min-width:98px;padding:10px 9px 10px 41px;border-radius:14px}.object-icon{left:9px;top:9px;width:27px;height:27px}.object-icon svg{width:17px}.hero-object b{font-size:11px}.hero-object small{font-size:8px}.hero-object--pdf{top:3%;right:8%}.hero-object--voice{left:4%;top:20%}.hero-object--web{right:3%;bottom:19%}.hero-object--excel{left:8%;bottom:3%}.hero-foot span{display:none}.problem-card{min-height:475px;padding:22px}.problem-visual{height:185px}.problem-visual>svg{width:108px;height:108px}.problem-card h3{font-size:25px}.problem-card>p{font-size:15px}.problem-shift{left:22px;right:22px;bottom:22px}.problem-banner{grid-template-columns:1fr;padding:23px}.banner-stamp{width:58px;height:58px}.problem-banner p{font-size:14px}.service-card{flex-basis:86vw;min-height:450px;padding:26px}.service-top svg{width:70px;height:70px}.service-verb{font-size:50px}.service-card>p:not(.service-verb){font-size:15px}.oversize-message>div{font-size:58px}.project-copy p{font-size:15px}.project-crop{min-height:240px}.project-crop--voice{grid-template-columns:1fr 1fr;gap:8px}.voice-wave{gap:5px}.voice-wave i{width:7px}.transcript{padding:16px}.project-crop--ocr{grid-template-columns:1fr 35px 1fr}.ocr-input,.ocr-output{padding:15px}.ocr-input strong{font-size:28px}.ocr-arrow{width:34px}.flow-path{grid-template-columns:1fr}.flow-step{min-height:auto}.flow-callout{grid-template-columns:1fr}.flow-callout>svg{width:44px}.style-list h3{font-size:21px}.style-list p{font-size:15px}.faq-section{padding:85px 0}.faq-question{padding:20px 0;gap:15px}.faq-question span{font-size:16px}.faq-question i{flex-basis:34px;width:34px;height:34px}.faq-edge--q{font-size:160px}.contact-section{padding:88px 0}.contact-form{padding:24px 18px}.form-field input,.form-field select,.form-field textarea{font-size:15px}.company-mark{width:70px;height:70px;font-size:30px}.company-table>div{grid-template-columns:1fr;gap:5px}.company-table dd{font-size:15px}.pc-only{display:none}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}.hero-object,.loop-track,.voice-wave i{animation:none!important}}


/* =========================================================
   v4.1 / vivid-pastel balance
   Keep v4's lightness, but increase contrast and saturation.
========================================================= */

/* HERO: stronger object color + more legible contrast */
.hero-blob{
  background:linear-gradient(145deg,#cbd8ff 0%,#eef3ff 46%,#bfe2d3 100%);
  animation:heroBlobMorph 8.5s ease-in-out infinite alternate;
}
.hero-screen{
  animation:heroScreenDrift 6.5s ease-in-out infinite alternate;
}
.hero-object{animation:none}
.hero-object--pdf{animation:heroPdf 4.8s ease-in-out infinite alternate}
.hero-object--voice{animation:heroVoice 5.4s ease-in-out infinite alternate}
.hero-object--web{animation:heroWeb 5.1s ease-in-out infinite alternate}
.hero-object--excel{animation:heroExcel 5.8s ease-in-out infinite alternate}
.hero-object .object-icon{animation:heroIconPulse 2.8s ease-in-out infinite alternate}
.hero-object--pdf .object-icon{color:#7e5700;background:#f7d875}
.hero-object--voice .object-icon{color:#fff;background:#735596}
.hero-object--web .object-icon{color:#fff;background:#5278f5}
.hero-object--excel .object-icon{color:#fff;background:#45a798}
.hero-pulse--one{background:#f5bb36;animation:pulseOne 4.6s ease-in-out infinite alternate}
.hero-pulse--two{border-color:#f57436;animation:pulseTwo 5.2s ease-in-out infinite alternate}
.screen-convert svg{animation:convertArrow 1.45s ease-in-out infinite}
.manual-row.is-flow-active{background:#eef2ff;border-color:#b8c7ff;transform:translateX(8px);box-shadow:0 8px 22px rgba(82,120,245,.10)}
.after-card.is-flow-active{background:#e4f2ec;border-color:#9ccfb9;transform:translateX(-8px);box-shadow:0 8px 22px rgba(69,167,152,.14)}

@keyframes heroBlobMorph{
  0%{border-radius:46% 54% 46% 54%/54% 43% 57% 46%;transform:rotate(-3deg) scale(1)}
  50%{border-radius:56% 44% 58% 42%/44% 56% 44% 56%;transform:rotate(1deg) scale(1.025)}
  100%{border-radius:43% 57% 48% 52%/59% 39% 61% 41%;transform:rotate(-1deg) scale(.99)}
}
@keyframes heroScreenDrift{
  0%{transform:translate(-50%,-50%) rotate(-2deg)}
  48%{transform:translate(-49%,-52%) rotate(-.7deg)}
  100%{transform:translate(-51%,-49%) rotate(-2.6deg)}
}
@keyframes heroPdf{
  0%{margin:0;transform:rotate(5deg)}
  45%{margin:-16px 0 0 8px;transform:rotate(1deg)}
  100%{margin:7px 0 0 -5px;transform:rotate(7deg)}
}
@keyframes heroVoice{
  0%{margin:0;transform:rotate(-6deg)}
  45%{margin:11px 0 0 -8px;transform:rotate(-2deg)}
  100%{margin:-13px 0 0 6px;transform:rotate(-8deg)}
}
@keyframes heroWeb{
  0%{margin:0;transform:rotate(-5deg)}
  50%{margin:-12px 0 0 -9px;transform:rotate(-1deg)}
  100%{margin:9px 0 0 6px;transform:rotate(-7deg)}
}
@keyframes heroExcel{
  0%{margin:0;transform:rotate(5deg)}
  42%{margin:-10px 0 0 -7px;transform:rotate(8deg)}
  100%{margin:12px 0 0 8px;transform:rotate(2deg)}
}
@keyframes heroIconPulse{to{transform:scale(1.08) rotate(3deg)}}
@keyframes pulseOne{to{transform:translate(-9px,11px) scale(1.12)}}
@keyframes pulseTwo{to{transform:translate(10px,-9px) rotate(15deg) scale(.92)}}
@keyframes convertArrow{0%,100%{transform:translateX(-4px)}50%{transform:translateX(6px)}}

/* PROBLEM: vivid-pastel, strong cards use white text */
.problem-card--sky{background:#b9e7f4}
.problem-card--coral{background:#f57436;color:#fff;border-color:transparent}
.problem-card--mint{background:#45a798;color:#fff;border-color:transparent}
.problem-card--violet{background:#735596;color:#fff;border-color:transparent}
.problem-card--coral .problem-no,
.problem-card--mint .problem-no,
.problem-card--violet .problem-no{color:rgba(255,255,255,.70)}
.problem-card--coral>p,
.problem-card--mint>p,
.problem-card--violet>p{color:rgba(255,255,255,.86)}
.problem-card--coral .problem-shift,
.problem-card--mint .problem-shift,
.problem-card--violet .problem-shift{border-color:rgba(255,255,255,.22)}
.problem-card--coral .problem-shift span,
.problem-card--mint .problem-shift span,
.problem-card--violet .problem-shift span{color:rgba(255,255,255,.72)}
.problem-card--coral .problem-shift b,
.problem-card--mint .problem-shift b,
.problem-card--violet .problem-shift b{color:rgba(255,255,255,.60)}
.problem-card--coral .problem-visual>svg,
.problem-card--mint .problem-visual>svg,
.problem-card--violet .problem-visual>svg{stroke:#fff;opacity:.95}
.problem-card--sky .problem-visual>svg{stroke:#17212b}
.problem-card--coral .mini-object,
.problem-card--mint .mini-object,
.problem-card--violet .mini-object{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.55)}
.problem-banner{background:#f7d875;border-color:#e5bd3f}
.banner-stamp{background:#f57436;color:#fff}

/* WHAT WE DO: two vivid cards, two vivid-pastel cards for rhythm */
.service-card{border-color:transparent}
.service-card--blue{background:#607fe2;color:#fff}
.service-card--green{background:#45a798;color:#fff}
.service-card--yellow{background:#f7d875;color:#17212b}
.service-card--purple{background:#735596;color:#fff}
.service-card--blue .service-top svg,
.service-card--green .service-top svg,
.service-card--purple .service-top svg{stroke:#fff}
.service-card--blue>p:not(.service-verb),
.service-card--green>p:not(.service-verb),
.service-card--purple>p:not(.service-verb){color:rgba(255,255,255,.86)}
.service-card--blue li,
.service-card--green li,
.service-card--purple li{background:rgba(255,255,255,.94);border-color:transparent;color:#17212b}
.service-card--yellow li{background:rgba(255,255,255,.75);border-color:rgba(23,33,43,.08)}
.service-orb--left{background:#bfe2d3}
.service-orb--right{background:#f8b784}

/* TOOLS: same visual language, readable white copy on stronger cards */
.project{border:0}
.project--blue{background:#607fe2;color:#fff}
.project--green{background:#45a798;color:#fff}
.project--yellow{background:#f7d875;color:#17212b}
.project--purple{background:#735596;color:#fff}
.project--blue .project-copy p,
.project--green .project-copy p,
.project--purple .project-copy p{color:rgba(255,255,255,.86)}
.project--blue .project-tag,
.project--green .project-tag,
.project--purple .project-tag{color:#17212b;background:rgba(255,255,255,.95)}
.project--yellow .project-tag{color:#755200;background:rgba(255,255,255,.72)}
.project--blue .project-copy a,
.project--green .project-copy a,
.project--purple .project-copy a{color:#fff}
.pc2{background:#f57436}
.voice-wave i{background:#fff}
.project--green .transcript small{color:#32765f}
.project--purple .sales-tags span{color:#5b3f80}

/* keep surrounding sections light so the vivid blocks can breathe */
.service-section{background:linear-gradient(180deg,#f8faff 0%,#fff 100%)}
.tools-section{background:#fff}
.loop-band{background:#5278f5}

@media(max-width:768px){
  .hero-screen{animation-duration:7.4s}
  .hero-object--pdf,.hero-object--voice,.hero-object--web,.hero-object--excel{animation-duration:5.8s}
}

@media(prefers-reduced-motion:reduce){
  .hero-blob,.hero-screen,.hero-object,.hero-object .object-icon,.hero-pulse,.screen-convert svg{animation:none!important}
}


/* =========================================================
   v5 / motion & continuous marquee
========================================================= */

/* Continuous loop — always two identical strips, no empty gap. */
.loop-track{
  display:flex;
  width:max-content;
  gap:0;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation:loopContinuous 28s linear infinite;
}
.loop-set{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:28px;
  min-width:100vw;
  padding-right:28px;
}
.loop-set span{
  flex:none;
}
@keyframes loopContinuous{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* WHAT WE DO bottom statement also becomes a seamless marquee. */
.oversize-message{
  overflow:hidden;
  padding:20px 0 34px;
  background:#fff;
}
.oversize-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  will-change:transform;
  animation:oversizeContinuous 34s linear infinite;
}
.oversize-set{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:30px;
  min-width:100vw;
  padding-right:30px;
}
.oversize-set span{
  font-size:clamp(72px,9vw,140px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.08em;
  color:var(--ink);
}
.oversize-set .accent{color:var(--coral)}
.oversize-set i{
  flex:none;
  color:var(--yellow);
  font-style:normal;
  font-size:clamp(24px,3vw,45px);
}
@keyframes oversizeContinuous{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* HERO gets more obvious motion without becoming chaotic. */
.hero-edge--folder{animation:heroEdgeFolder 7.2s ease-in-out infinite alternate}
.hero-edge--wifi{animation:heroEdgeWifi 6.3s ease-in-out infinite alternate}
.hero-edge--cursor{animation:heroEdgeCursor 5.8s ease-in-out infinite alternate}
.hero-stage .hero-object{will-change:transform,translate}
.hero-object--pdf{animation-duration:4.1s}
.hero-object--voice{animation-duration:4.7s}
.hero-object--web{animation-duration:4.4s}
.hero-object--excel{animation-duration:5s}
.hero-pulse--one{animation-duration:3.8s}
.hero-pulse--two{animation-duration:4.2s}

@keyframes heroEdgeFolder{
  0%{translate:0 -8px;rotate:-3deg;scale:.96}
  100%{translate:18px 16px;rotate:8deg;scale:1.08}
}
@keyframes heroEdgeWifi{
  0%{translate:-6px -10px;rotate:-5deg;scale:.94}
  100%{translate:13px 18px;rotate:8deg;scale:1.08}
}
@keyframes heroEdgeCursor{
  0%{translate:-8px 5px;rotate:-4deg;scale:.94}
  100%{translate:15px -13px;rotate:7deg;scale:1.12}
}

/* Shared scroll-motion variables set by top.js */
.js-motion-section{
  --motion-y:0px;
  --motion-y-neg:0px;
  --motion-y-small:0px;
  --motion-y-small-neg:0px;
  --motion-rotate:0deg;
  --motion-scale:1;
}

/* PROBLEM: edge follows, pictograms breathe at a different speed. */
.problem-section .edge-object--problem{
  translate:0 var(--motion-y);
  rotate:var(--motion-rotate);
  scale:var(--motion-scale);
  will-change:translate,rotate,scale;
}
.problem-section .problem-card:nth-child(odd) .mini-object{
  translate:0 var(--motion-y-small);
}
.problem-section .problem-card:nth-child(even) .mini-object{
  translate:0 var(--motion-y-small-neg);
}
.problem-section .problem-visual>svg{
  scale:var(--motion-scale);
  rotate:var(--motion-rotate);
  transform-origin:center;
  will-change:scale,rotate;
}
.problem-card:hover .mini-object{
  scale:1.08;
}

/* WHAT WE DO: background objects and pictograms move separately. */
.service-section .service-orb--left{
  translate:0 var(--motion-y);
  scale:var(--motion-scale);
}
.service-section .service-orb--right{
  translate:0 var(--motion-y-neg);
  scale:var(--motion-scale);
}
.service-section .service-card:nth-child(odd) .service-top svg{
  translate:0 var(--motion-y-small);
  rotate:var(--motion-rotate);
}
.service-section .service-card:nth-child(even) .service-top svg{
  translate:0 var(--motion-y-small-neg);
  rotate:var(--motion-rotate-neg);
}
.service-card:hover .service-top svg{
  scale:1.08;
}

/* TOOLS: each visual gently travels against the page scroll. */
.tools-section .edge-object--tools{
  translate:0 var(--motion-y);
  rotate:var(--motion-rotate);
  scale:var(--motion-scale);
}
.js-motion-project{
  --project-y:0px;
  --project-y-neg:0px;
  --project-scale:1;
}
.js-motion-project .project-crop{
  translate:0 var(--project-y);
  scale:var(--project-scale);
  will-change:translate,scale;
}
.js-motion-project.project--reverse .project-crop{
  translate:0 var(--project-y-neg);
}

/* Voice project: microphone travels independently while the waveform animates. */
.project-crop--voice{
  position:relative;
}
.voice-orbit-icon{
  position:absolute;
  left:42%;
  top:6%;
  z-index:5;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  color:#fff;
  background:#2f8068;
  border:2px solid rgba(255,255,255,.72);
  border-radius:50%;
  box-shadow:0 14px 30px rgba(29,91,70,.18);
  animation:voiceMicOrbit 4.8s ease-in-out infinite alternate;
}
.voice-orbit-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}
.voice-orbit-icon span{
  position:absolute;
  right:-7px;
  bottom:-4px;
  padding:3px 6px;
  color:#fff;
  background:#f57436;
  border:2px solid #fff;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.project--green .transcript{
  animation:transcriptFloat 4.2s ease-in-out infinite alternate;
}
.project--green:hover .voice-orbit-icon{
  animation-duration:2.4s;
}
@keyframes voiceMicOrbit{
  0%{translate:-20px 4px;rotate:-9deg;scale:.94}
  45%{translate:9px 18px;rotate:5deg;scale:1.08}
  100%{translate:24px -8px;rotate:10deg;scale:1}
}
@keyframes transcriptFloat{
  from{translate:0 -5px;rotate:-1deg}
  to{translate:0 8px;rotate:1deg}
}

/* OCR / bid / sales visuals gain a subtle living motion as well. */
.project--blue .project-chip.pc1{animation:toolChipA 4.8s ease-in-out infinite alternate}
.project--blue .project-chip.pc2{animation:toolChipB 4.2s ease-in-out infinite alternate}
.project--blue .project-chip.pc3{animation:toolChipC 5.2s ease-in-out infinite alternate}
.project--yellow .ocr-input{animation:ocrInputFloat 5s ease-in-out infinite alternate}
.project--yellow .ocr-output{animation:ocrOutputFloat 5.4s ease-in-out infinite alternate}
.project--purple .sales-tags{animation:salesTagsFloat 4.6s ease-in-out infinite alternate}
@keyframes toolChipA{to{translate:12px 9px;rotate:4deg}}
@keyframes toolChipB{to{translate:-10px 13px;rotate:-5deg}}
@keyframes toolChipC{to{translate:-8px -11px;rotate:4deg}}
@keyframes ocrInputFloat{to{translate:0 -9px;rotate:-1deg}}
@keyframes ocrOutputFloat{to{translate:0 10px;rotate:1deg}}
@keyframes salesTagsFloat{to{translate:14px 8px}}

/* FLOW: the large gear follows scroll while step icons pulse subtly. */
.flow-section .flow-edge{
  translate:0 var(--motion-y-neg);
  rotate:var(--motion-rotate);
  scale:var(--motion-scale);
}
.flow-section .flow-step:nth-child(odd) .flow-icon{
  translate:0 var(--motion-y-small);
}
.flow-section .flow-step:nth-child(even) .flow-icon{
  translate:0 var(--motion-y-small-neg);
}
.flow-icon{
  transition:scale .25s var(--ease);
}
.flow-step:hover .flow-icon{
  scale:1.10;
}

/* N WORKS STYLE: keep the sticky heading, but let each row react to viewport center. */
.style-list article{
  --style-focus:.72;
  --style-shift:18px;
  opacity:var(--style-focus);
  translate:var(--style-shift) 0;
  transition:opacity .22s linear, translate .22s linear;
}
.style-list article .style-dot{
  scale:var(--style-dot-scale);
  transition:scale .22s linear;
}

/* FAQ + contact decorative pieces also have different scroll speeds. */
.faq-section .faq-edge--q{
  translate:0 var(--motion-y);
  rotate:var(--motion-rotate);
}
.faq-section .faq-edge--wifi{
  translate:0 var(--motion-y-neg);
  rotate:var(--motion-rotate-neg);
}
.contact-section .contact-intro{
  translate:0 var(--motion-y-small);
}

/* Motion safety */
@media(max-width:768px){
  .loop-set{gap:22px;padding-right:22px}
  .oversize-set{gap:22px;padding-right:22px}
  .oversize-set span{font-size:72px}
  .voice-orbit-icon{width:56px;height:56px;left:40%;top:3%}
  .voice-orbit-icon svg{width:24px;height:24px}
}
@media(max-width:480px){
  .loop-set{gap:18px;padding-right:18px}
  .oversize-set span{font-size:58px}
  .voice-orbit-icon{width:48px;height:48px;left:39%;top:2%}
  .voice-orbit-icon svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  .loop-track,.oversize-track,
  .hero-edge,.voice-orbit-icon,.project--green .transcript,
  .project-chip,.ocr-input,.ocr-output,.sales-tags{
    animation:none!important;
  }
  .js-motion-section *,
  .js-motion-project *{
    translate:none!important;
    rotate:none!important;
    scale:none!important;
  }
}


/* =========================================================
   v5.1 / WHAT WE DO number + PROBLEM point banner
========================================================= */

/* WHAT WE DO card numbers were too small. */
.service-top span{
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
}

/* Strong accent banner: white copy on a clear color block. */
.problem-banner{
  background:#f57436;
  border-color:#f57436;
}
.problem-banner strong{
  color:#fff;
}
.problem-banner p{
  color:rgba(255,255,255,.88);
}
.banner-stamp{
  color:#fff;
  background:#3e3154;
}
.problem-banner>svg{
  fill:#f5bb36;
  stroke:#fff;
}

@media(max-width:768px){
  .service-top span{font-size:21px}
}
@media(max-width:480px){
  .service-top span{font-size:19px}
}


/* =========================================================
   v5.2 / Theme palette
   Tangerine Dream #FFAF87
   Salmon          #FF8E72
   Vibrant Coral   #ED6A5E
   Tropical Mint   #4CE0B3
   Pine Blue       #377771
========================================================= */

:root{
  --tangerine:#FFAF87;
  --salmon:#FF8E72;
  --vibrant-coral:#ED6A5E;
  --tropical-mint:#4CE0B3;
  --pine-blue:#377771;

  --blue:#377771;
  --blue-soft:#bfe7dc;
  --sky:#FFAF87;
  --green:#4CE0B3;
  --green-soft:#baf3df;
  --yellow:#FFAF87;
  --yellow-soft:#ffd0b6;
  --purple:#377771;
  --purple-soft:#b8d8d2;
  --coral:#ED6A5E;
  --coral-soft:#FF8E72;
  --orange:#FF8E72;
  --orange-soft:#FFAF87;
  --cream:#fffaf7;
  --paper:#f7f8f6;
}

/* Primary interface */
.site-header.is-scrolled{background:rgba(255,250,247,.93)}
.brand-mark{background:var(--pine-blue)}
.global-nav>a:not(.nav-cta)::after{background:var(--vibrant-coral)}
.nav-cta{background:var(--pine-blue)}
.nav-cta:hover{background:var(--vibrant-coral)}
.button-primary{background:var(--pine-blue)}
.button-primary:hover{background:var(--vibrant-coral)}
.section-label{color:var(--pine-blue)}

/* HERO */
.hero{
  background:
    radial-gradient(circle at 86% 12%,rgba(76,224,179,.18),transparent 25%),
    radial-gradient(circle at 13% 84%,rgba(255,175,135,.22),transparent 26%),
    var(--cream);
}
.hero h1 em{color:var(--vibrant-coral)}
.hero-blob{
  background:linear-gradient(145deg,var(--tangerine),var(--salmon));
}
.hero-object--pdf .object-icon{background:var(--vibrant-coral);color:#fff}
.hero-object--voice .object-icon{background:var(--tropical-mint);color:#163d34}
.hero-object--web .object-icon{background:var(--pine-blue);color:#fff}
.hero-object--excel .object-icon{background:var(--salmon);color:#fff}
.hero-pulse--one{border-color:rgba(76,224,179,.55)}
.hero-pulse--two{border-color:rgba(237,106,94,.42)}
.loop-band{background:var(--pine-blue)}
.loop-track i{color:var(--tangerine)}

/* PROBLEM */
.problem-card--sky{background:var(--tangerine)}
.problem-card--coral{background:var(--vibrant-coral);color:#fff}
.problem-card--mint{background:var(--tropical-mint);color:#153c34}
.problem-card--violet{background:var(--pine-blue);color:#fff}

.problem-card--coral>p,
.problem-card--violet>p{color:rgba(255,255,255,.86)}
.problem-card--coral .problem-no,
.problem-card--violet .problem-no{color:rgba(255,255,255,.72)}
.problem-card--coral .problem-shift,
.problem-card--violet .problem-shift{background:rgba(255,255,255,.16);color:#fff}
.problem-card--coral .problem-shift strong,
.problem-card--violet .problem-shift strong{color:#fff}
.problem-card--coral .problem-visual>svg,
.problem-card--coral .mini-object svg,
.problem-card--violet .problem-visual>svg,
.problem-card--violet .mini-object svg{stroke:#fff}

.problem-banner{
  background:var(--vibrant-coral);
  border-color:var(--vibrant-coral);
}
.problem-banner strong{color:#fff}
.problem-banner p{color:rgba(255,255,255,.88)}
.banner-stamp{background:var(--pine-blue);color:#fff}
.problem-banner>svg{fill:var(--tangerine);stroke:#fff}

/* WHAT WE DO */
.service-section{
  background:
    radial-gradient(circle at 2% 18%,rgba(76,224,179,.18),transparent 17%),
    radial-gradient(circle at 98% 78%,rgba(255,142,114,.16),transparent 18%),
    #fff;
}
.service-orb--left{background:var(--tropical-mint)}
.service-orb--right{background:var(--tangerine)}

.service-card--blue{background:var(--pine-blue);color:#fff}
.service-card--green{background:var(--tropical-mint);color:#153c34}
.service-card--yellow{background:var(--tangerine);color:#38271f}
.service-card--purple{background:var(--vibrant-coral);color:#fff}

.service-card--blue>p:not(.service-verb),
.service-card--purple>p:not(.service-verb){color:rgba(255,255,255,.86)}
.service-card--blue .service-top svg,
.service-card--purple .service-top svg{stroke:#fff}
.service-card--blue li,
.service-card--purple li{background:rgba(255,255,255,.93);color:var(--ink);border-color:transparent}

.oversize-set .accent{color:var(--vibrant-coral)}
.oversize-set i{color:var(--tropical-mint)}

/* TOOLS */
.project--blue{background:var(--pine-blue);color:#fff}
.project--green{background:var(--tropical-mint);color:#153c34}
.project--yellow{background:var(--tangerine);color:#38271f}
.project--purple{background:var(--vibrant-coral);color:#fff}

.project--blue .project-copy p,
.project--purple .project-copy p{color:rgba(255,255,255,.86)}
.project--blue .project-tag,
.project--purple .project-tag{background:rgba(255,255,255,.94);color:var(--ink)}
.project--blue .project-copy a,
.project--purple .project-copy a{color:#fff}
.project--blue .project-crop,
.project--purple .project-crop{background:rgba(255,255,255,.12)}

.voice-orbit-icon{background:var(--pine-blue)}
.voice-orbit-icon span{background:var(--vibrant-coral)}
.project-chip.pc2{background:var(--vibrant-coral)}
.project-chip.pc3{background:var(--tropical-mint);color:#153c34}

/* FLOW */
.flow-section{
  background:linear-gradient(180deg,#f8fffc 0%,#fff7f3 100%);
}
.flow-icon{background:var(--tropical-mint)}
.flow-step:nth-of-type(3) .flow-icon{background:var(--tangerine)}
.flow-step:nth-of-type(5) .flow-icon{background:var(--salmon)}
.flow-step:nth-of-type(7) .flow-icon{background:var(--pine-blue);color:#fff}
.flow-callout{background:var(--salmon);color:#fff}
.flow-callout span{color:rgba(255,255,255,.75)}

/* STYLE / FAQ / CONTACT */
.sd-blue{background:var(--pine-blue)}
.sd-green{background:var(--tropical-mint)}
.sd-yellow{background:var(--tangerine)}
.sd-purple{background:var(--vibrant-coral)}
.faq-section{background:#f8fbfa}
.faq-edge--q{color:var(--vibrant-coral)}
.faq-edge--wifi{color:var(--pine-blue)}
.faq-question b{color:var(--vibrant-coral)}
.contact-section{
  background:
    radial-gradient(circle at 8% 12%,rgba(255,175,135,.22),transparent 22%),
    radial-gradient(circle at 91% 88%,rgba(76,224,179,.18),transparent 24%),
    #fff;
}
.contact-object--mail{color:var(--vibrant-coral)}
.contact-object--cursor{color:var(--pine-blue)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--pine-blue);
  box-shadow:0 0 0 4px rgba(55,119,113,.10);
}
.form-submit{background:var(--pine-blue)}
.form-submit:hover{background:var(--vibrant-coral)}
.company-section{background:var(--tangerine)}
.company-mark{background:var(--pine-blue);color:#fff}
.site-footer{background:var(--pine-blue)}
.footer-brand span{background:var(--vibrant-coral)}

/* =========================================================
   GitHub / public development works
========================================================= */

.github-section{
  position:relative;
  overflow:hidden;
  padding:135px 0;
  color:#fff;
  background:var(--pine-blue);
}
.github-section .section-label{color:var(--tropical-mint)}
.github-head{
  position:relative;
  z-index:2;
  max-width:840px;
  margin-bottom:58px;
}
.github-head h2{
  color:#fff;
}
.github-head>p:last-of-type{
  max-width:690px;
  color:rgba(255,255,255,.78);
}
.github-profile-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:25px;
  padding:11px 16px 11px 11px;
  color:var(--pine-blue);
  background:#fff;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  transition:transform .25s var(--ease);
}
.github-profile-link:hover{transform:translateY(-3px) rotate(-1deg)}
.github-profile-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:#fff;
  background:var(--vibrant-coral);
  border-radius:50%;
  font-size:10px;
  letter-spacing:.05em;
}
.github-profile-link b{color:var(--vibrant-coral)}

.github-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.github-card{
  min-height:265px;
  display:flex;
  flex-direction:column;
  padding:25px;
  color:var(--ink);
  border-radius:28px 28px 28px 9px;
  transition:transform .28s var(--ease),box-shadow .28s ease;
}
.github-card:nth-child(even){border-radius:28px 28px 9px 28px}
.github-card:hover{
  transform:translateY(-7px) rotate(-.7deg);
  box-shadow:0 22px 42px rgba(8,44,40,.24);
}
.github-card--peach{background:var(--tangerine)}
.github-card--mint{background:var(--tropical-mint)}
.github-card--salmon{background:var(--salmon)}
.github-card--coral{background:var(--vibrant-coral);color:#fff}
.github-card--pine{background:#fff;color:var(--pine-blue)}

.github-card-top,
.github-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.github-card-top span{
  font-size:23px;
  line-height:1;
  font-weight:900;
}
.github-card-top b{
  padding:5px 8px;
  background:rgba(255,255,255,.52);
  border-radius:999px;
  font-size:10px;
  letter-spacing:.04em;
}
.github-card--coral .github-card-top b{background:rgba(255,255,255,.18)}
.github-card h3{
  overflow-wrap:anywhere;
  margin:34px 0 0;
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.035em;
}
.github-card p{
  margin:11px 0 25px;
  font-size:14px;
  line-height:1.7;
  opacity:.80;
}
.github-card-foot{
  margin-top:auto;
  padding-top:15px;
  border-top:1px solid rgba(23,33,43,.14);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.github-card--coral .github-card-foot{border-top-color:rgba(255,255,255,.24)}
.github-card-foot b{font-size:9px}

.github-decor{
  position:absolute;
  pointer-events:none;
  opacity:.20;
  will-change:translate,rotate,scale;
}
.github-decor--code{
  right:-45px;
  top:55px;
  font-size:160px;
  line-height:1;
  font-weight:900;
  color:var(--tropical-mint);
  rotate:9deg;
}
.github-decor--folder{
  left:-55px;
  bottom:80px;
  width:150px;
  height:150px;
  color:var(--tangerine);
  rotate:-12deg;
}
.github-decor--folder svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}
.github-section .github-decor--code{
  translate:0 var(--motion-y);
}
.github-section .github-decor--folder{
  translate:0 var(--motion-y-neg);
}

@media(max-width:1024px){
  .github-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .github-section{padding:90px 0}
  .github-grid{
    display:flex;
    gap:13px;
    overflow-x:auto;
    margin-inline:-17px;
    padding:3px 17px 18px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .github-grid::-webkit-scrollbar{display:none}
  .github-card{
    flex:0 0 84vw;
    min-height:260px;
    scroll-snap-align:center;
  }
  .github-decor--code{font-size:105px;right:-30px}
  .github-decor--folder{width:105px;height:105px}
}


/* =========================================================
   N WORKS v5.3 / Flat UI Theme
   Turquoise      #1ABC9C
   Emerald        #2ECC71
   Peter River    #3498DB
   Amethyst       #9B59B6
   Wet Asphalt    #34495E
   Sun Flower     #F1C40F
   Carrot         #E67E22
   Alizarin       #E74C3C
   Clouds         #ECF0F1
   ========================================================= */

:root{
  --turquoise:#1ABC9C;
  --green-sea:#16A085;
  --emerald:#2ECC71;
  --nephritis:#27AE60;

  --peter-river:#3498DB;
  --belize-hole:#2980B9;

  --amethyst:#9B59B6;
  --wisteria:#8E44AD;

  --wet-asphalt:#34495E;
  --midnight-blue:#2C3E50;

  --sun-flower:#F1C40F;
  --orange-flat:#F39C12;

  --carrot:#E67E22;
  --pumpkin:#D35400;

  --alizarin:#E74C3C;
  --pomegranate:#C0392B;

  --clouds:#ECF0F1;
  --silver:#BDC3C7;
  --concrete:#95A5A6;
  --asbestos:#7F8C8D;

  --ink:#243746;
  --muted:#667684;
  --line:#D6DEE3;
  --cream:#FFFFFF;
  --white:#FFFFFF;
  --paper:#F7F9FA;

  /* Existing semantic variables redirected to Flat UI palette */
  --blue:var(--peter-river);
  --blue-soft:#DCEFFB;
  --sky:#CDECF8;

  --green:var(--turquoise);
  --green-soft:#D5F3ED;

  --yellow:var(--sun-flower);
  --yellow-soft:#FFF2B2;

  --purple:var(--amethyst);
  --purple-soft:#EADCF1;

  --coral:var(--alizarin);
  --coral-soft:#F5B7B1;

  --orange:var(--carrot);
  --orange-soft:#FAD8BC;
}

/* ---------------------------------------------------------
   Core interface
--------------------------------------------------------- */
body{
  color:var(--ink);
  background:#fff;
}

.site-header.is-scrolled{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(189,195,199,.75);
}

.brand-mark{
  color:#fff;
  background:var(--wet-asphalt);
}

.global-nav>a:not(.nav-cta)::after{
  background:var(--peter-river);
}

.nav-cta,
.button-primary,
.form-submit{
  color:#fff;
  background:var(--wet-asphalt);
}

.nav-cta:hover,
.button-primary:hover,
.form-submit:hover{
  background:var(--peter-river);
}

.button-ghost{
  color:var(--wet-asphalt);
  background:#fff;
  border-color:var(--silver);
}

.section-label{
  color:var(--peter-river);
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{
  background:
    radial-gradient(circle at 86% 12%,rgba(26,188,156,.16),transparent 25%),
    radial-gradient(circle at 12% 84%,rgba(241,196,15,.12),transparent 28%),
    #fff;
}

.hero h1 em{
  color:var(--peter-river);
}

.hero-blob{
  background:linear-gradient(145deg,var(--turquoise),var(--peter-river));
}

.hero-screen{
  border-color:rgba(52,73,94,.15);
  box-shadow:0 30px 70px rgba(44,62,80,.15);
}

.hero-object{
  border-color:rgba(52,73,94,.12);
  box-shadow:0 16px 34px rgba(44,62,80,.11);
}

.hero-object--pdf .object-icon{
  color:#fff;
  background:var(--alizarin);
}

.hero-object--voice .object-icon{
  color:#fff;
  background:var(--turquoise);
}

.hero-object--web .object-icon{
  color:#fff;
  background:var(--peter-river);
}

.hero-object--excel .object-icon{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

.hero-edge--folder{
  color:var(--carrot);
}

.hero-edge--wifi{
  color:var(--turquoise);
}

.hero-edge--cursor{
  color:var(--amethyst);
}

.hero-pulse--one{
  border-color:rgba(26,188,156,.48);
}

.hero-pulse--two{
  border-color:rgba(52,152,219,.38);
}

/* Continuous statement band */
.loop-band{
  color:#fff;
  background:var(--wet-asphalt);
}

.loop-track i{
  color:var(--sun-flower);
}

/* ---------------------------------------------------------
   PROBLEM
   4 cards = four clearly separated color families
--------------------------------------------------------- */
.problem-section{
  background:#fff;
}

.problem-card{
  border-color:transparent;
  box-shadow:none;
}

/* Research = Peter River */
.problem-card--sky{
  color:#fff;
  background:var(--peter-river);
}

/* Excel = Carrot */
.problem-card--coral{
  color:#fff;
  background:var(--carrot);
}

/* Sales list = Turquoise */
.problem-card--mint{
  color:#fff;
  background:var(--turquoise);
}

/* AI read = Amethyst */
.problem-card--violet{
  color:#fff;
  background:var(--amethyst);
}

.problem-card--sky>p,
.problem-card--coral>p,
.problem-card--mint>p,
.problem-card--violet>p{
  color:rgba(255,255,255,.88);
}

.problem-card--sky .problem-no,
.problem-card--coral .problem-no,
.problem-card--mint .problem-no,
.problem-card--violet .problem-no{
  color:rgba(255,255,255,.76);
}

.problem-card--sky .problem-visual>svg,
.problem-card--coral .problem-visual>svg,
.problem-card--mint .problem-visual>svg,
.problem-card--violet .problem-visual>svg,
.problem-card--sky .mini-object svg,
.problem-card--coral .mini-object svg,
.problem-card--mint .mini-object svg,
.problem-card--violet .mini-object svg{
  stroke:#fff;
}

.problem-card .problem-shift{
  color:#fff;
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.22);
}

.problem-card .problem-shift strong{
  color:#fff;
}

.problem-banner{
  color:#fff;
  background:var(--alizarin);
  border-color:var(--alizarin);
}

.problem-banner strong{
  color:#fff;
}

.problem-banner p{
  color:rgba(255,255,255,.90);
}

.banner-stamp{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

.problem-banner>svg{
  fill:#fff;
  stroke:#fff;
}

/* ---------------------------------------------------------
   WHAT WE DO
--------------------------------------------------------- */
.service-section{
  background:
    radial-gradient(circle at 3% 16%,rgba(46,204,113,.10),transparent 18%),
    radial-gradient(circle at 97% 82%,rgba(155,89,182,.10),transparent 18%),
    #fff;
}

.service-orb--left{
  background:var(--turquoise);
}

.service-orb--right{
  background:var(--amethyst);
}

/* つくる */
.service-card--blue{
  color:#fff;
  background:var(--peter-river);
}

/* へらす */
.service-card--green{
  color:#fff;
  background:var(--turquoise);
}

/* あつめる - Yellow remains dark text for contrast */
.service-card--yellow{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

/* つたえる */
.service-card--purple{
  color:#fff;
  background:var(--amethyst);
}

.service-card--blue>p:not(.service-verb),
.service-card--green>p:not(.service-verb),
.service-card--purple>p:not(.service-verb){
  color:rgba(255,255,255,.88);
}

.service-card--yellow>p:not(.service-verb){
  color:rgba(52,73,94,.82);
}

.service-card--blue .service-top svg,
.service-card--green .service-top svg,
.service-card--purple .service-top svg{
  stroke:#fff;
}

.service-card--yellow .service-top svg{
  stroke:var(--wet-asphalt);
}

.service-card li{
  border-color:transparent;
  background:rgba(255,255,255,.92);
  color:var(--wet-asphalt);
}

.oversize-message{
  background:#fff;
}

.oversize-set span{
  color:var(--wet-asphalt);
}

.oversize-set .accent{
  color:var(--alizarin);
}

.oversize-set i{
  color:var(--sun-flower);
}

/* ---------------------------------------------------------
   TOOLS / PROJECTS
--------------------------------------------------------- */
.tools-section{
  background:#fff;
}

/* Bid */
.project--blue{
  color:#fff;
  background:var(--peter-river);
}

/* Voice */
.project--green{
  color:#fff;
  background:var(--turquoise);
}

/* OCR */
.project--yellow{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

/* Sales */
.project--purple{
  color:#fff;
  background:var(--amethyst);
}

.project--blue .project-copy p,
.project--green .project-copy p,
.project--purple .project-copy p{
  color:rgba(255,255,255,.88);
}

.project--yellow .project-copy p{
  color:rgba(52,73,94,.82);
}

.project--blue .project-tag,
.project--green .project-tag,
.project--purple .project-tag{
  color:var(--wet-asphalt);
  background:rgba(255,255,255,.94);
}

.project--yellow .project-tag{
  color:var(--wet-asphalt);
  background:rgba(255,255,255,.74);
}

.project--blue .project-copy a,
.project--green .project-copy a,
.project--purple .project-copy a{
  color:#fff;
}

.project--yellow .project-copy a{
  color:var(--wet-asphalt);
}

.project--blue .project-crop,
.project--green .project-crop,
.project--purple .project-crop{
  background:rgba(255,255,255,.13);
}

.project--yellow .project-crop{
  background:rgba(255,255,255,.30);
}

.voice-orbit-icon{
  color:#fff;
  background:var(--wet-asphalt);
}

.voice-orbit-icon span{
  color:#fff;
  background:var(--alizarin);
}

.project-chip.pc1{
  background:#fff;
  color:var(--wet-asphalt);
}

.project-chip.pc2{
  color:#fff;
  background:var(--alizarin);
}

.project-chip.pc3{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

.mini-tools{
  background:var(--clouds);
  border-color:var(--silver);
}

.mini-tools nav a{
  background:#fff;
}

/* ---------------------------------------------------------
   GITHUB / PUBLIC WORKS
--------------------------------------------------------- */
.github-section{
  color:#fff;
  background:var(--wet-asphalt);
}

.github-section .section-label{
  color:var(--turquoise);
}

.github-head h2{
  color:#fff;
}

.github-head>p:last-of-type{
  color:rgba(255,255,255,.80);
}

.github-profile-link{
  color:var(--wet-asphalt);
  background:#fff;
}

.github-profile-mark{
  color:#fff;
  background:var(--peter-river);
}

.github-profile-link b{
  color:var(--alizarin);
}

.github-card--peach{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

.github-card--mint{
  color:#fff;
  background:var(--turquoise);
}

.github-card--salmon{
  color:#fff;
  background:var(--carrot);
}

.github-card--coral{
  color:#fff;
  background:var(--alizarin);
}

.github-card--pine{
  color:#fff;
  background:var(--amethyst);
}

.github-card:nth-child(6){
  color:#fff;
  background:var(--peter-river);
}

.github-card--mint p,
.github-card--salmon p,
.github-card--coral p,
.github-card--pine p,
.github-card:nth-child(6) p{
  color:rgba(255,255,255,.86);
}

.github-card--peach p{
  color:rgba(52,73,94,.82);
}

.github-card--mint .github-card-top b,
.github-card--salmon .github-card-top b,
.github-card--coral .github-card-top b,
.github-card--pine .github-card-top b,
.github-card:nth-child(6) .github-card-top b{
  color:#fff;
  background:rgba(255,255,255,.16);
}

.github-card--peach .github-card-top b{
  color:var(--wet-asphalt);
  background:rgba(255,255,255,.48);
}

.github-card--mint .github-card-foot,
.github-card--salmon .github-card-foot,
.github-card--coral .github-card-foot,
.github-card--pine .github-card-foot,
.github-card:nth-child(6) .github-card-foot{
  border-top-color:rgba(255,255,255,.23);
}

.github-card--peach .github-card-foot{
  border-top-color:rgba(52,73,94,.16);
}

.github-decor--code{
  color:var(--turquoise);
}

.github-decor--folder{
  color:var(--sun-flower);
}

/* ---------------------------------------------------------
   HOW WE BUILD
--------------------------------------------------------- */
.flow-section{
  background:
    linear-gradient(180deg,#F7FCFA 0%,#FBFCFD 48%,#FFF9E9 100%);
}

.flow-step{
  background:#fff;
  border-color:var(--clouds);
}

.flow-step:nth-of-type(1) .flow-icon{
  color:#fff;
  background:var(--peter-river);
}

.flow-step:nth-of-type(3) .flow-icon{
  color:#fff;
  background:var(--turquoise);
}

.flow-step:nth-of-type(5) .flow-icon{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

.flow-step:nth-of-type(7) .flow-icon{
  color:#fff;
  background:var(--amethyst);
}

.flow-connector{
  color:var(--concrete);
}

.flow-callout{
  color:#fff;
  background:var(--carrot);
}

.flow-callout span{
  color:rgba(255,255,255,.74);
}

/* ---------------------------------------------------------
   N WORKS STYLE
--------------------------------------------------------- */
.style-section{
  background:#fff;
}

.sd-blue{background:var(--peter-river)}
.sd-green{background:var(--turquoise)}
.sd-yellow{background:var(--sun-flower)}
.sd-purple{background:var(--amethyst)}

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */
.faq-section{
  background:var(--clouds);
}

.faq-item{
  background:#fff;
  border-color:rgba(189,195,199,.75);
}

.faq-question b{
  color:var(--peter-river);
}

.faq-item:nth-child(4n+1) .faq-question b{
  color:var(--peter-river);
}

.faq-item:nth-child(4n+2) .faq-question b{
  color:var(--turquoise);
}

.faq-item:nth-child(4n+3) .faq-question b{
  color:var(--carrot);
}

.faq-item:nth-child(4n) .faq-question b{
  color:var(--amethyst);
}

.faq-edge--q{
  color:var(--alizarin);
}

.faq-edge--wifi{
  color:var(--peter-river);
}

/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */
.contact-section{
  background:
    radial-gradient(circle at 8% 13%,rgba(241,196,15,.13),transparent 22%),
    radial-gradient(circle at 92% 88%,rgba(26,188,156,.13),transparent 24%),
    #fff;
}

.contact-object--mail{
  color:var(--alizarin);
}

.contact-object--cursor{
  color:var(--amethyst);
}

.contact-form{
  border-color:var(--clouds);
  box-shadow:0 24px 60px rgba(44,62,80,.09);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--peter-river);
  box-shadow:0 0 0 4px rgba(52,152,219,.10);
}

/* ---------------------------------------------------------
   COMPANY / FOOTER
--------------------------------------------------------- */
.company-section{
  background:var(--sun-flower);
}

.company-mark{
  color:#fff;
  background:var(--wet-asphalt);
}

.site-footer{
  color:#fff;
  background:var(--wet-asphalt);
}

.footer-brand span{
  color:#fff;
  background:var(--alizarin);
}

/* ---------------------------------------------------------
   Mobile / interaction polish
--------------------------------------------------------- */
@media(max-width:768px){
  .problem-card--sky,
  .problem-card--coral,
  .problem-card--mint,
  .problem-card--violet{
    color:#fff;
  }

  .service-card--yellow,
  .project--yellow{
    color:var(--wet-asphalt);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-object,
  .hero-edge,
  .voice-orbit-icon,
  .github-decor,
  .project-chip{
    animation:none!important;
  }
}


/* =========================================================
   N WORKS v5.4 / Requested visual fixes
========================================================= */

/* HERO: keep the first phrase in one line */
.hero-firstline{
  display:inline-block;
  white-space:nowrap;
  font-size:.80em;
  letter-spacing:-.08em;
}

/* PROBLEM pictograms: suppress white-tile halation */
.problem-visual>svg{
  opacity:.96;
  filter:none;
}

.problem-card .mini-object{
  color:#fff;
  background:rgba(44,62,80,.24);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:none;
  backdrop-filter:none;
}

.problem-card .mini-object svg{
  stroke:#fff!important;
  opacity:.92;
}

.problem-card--sky .mini-object{background:rgba(44,62,80,.28)}
.problem-card--coral .mini-object{background:rgba(192,57,43,.30)}
.problem-card--mint .mini-object{background:rgba(22,160,133,.34)}
.problem-card--violet .mini-object{background:rgba(44,62,80,.26)}

/* PROBLEM bottom transformation copy: stronger contrast */
.problem-shift{
  padding:13px 15px;
  border-top:0;
  color:#fff;
  background:rgba(44,62,80,.20);
  border-radius:10px;
}

.problem-shift span,
.problem-shift b,
.problem-shift strong{
  color:#fff!important;
}

.problem-shift span{opacity:.88}
.problem-shift b{opacity:.72}

/* Replace decorative diamond/spark with a meaningful rotating tool icon */
.problem-banner-tool{
  width:58px;
  height:58px;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:1.8;
  animation:problemToolTurn 9s linear infinite;
}

@keyframes problemToolTurn{
  to{rotate:360deg}
}

/* WHAT WE DO icons map directly to each message */
.service-top svg{
  width:58px;
  height:58px;
}

/* GitHub: three focused public works */
.github-grid--three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.github-card--ocr{
  color:#fff;
  background:var(--peter-river);
}

.github-card--crop{
  color:#fff;
  background:var(--turquoise);
}

.github-card--resize{
  color:var(--wet-asphalt);
  background:var(--sun-flower);
}

.github-card--ocr p,
.github-card--crop p{
  color:rgba(255,255,255,.88);
}

.github-card--resize p{
  color:rgba(52,73,94,.84);
}

.github-work-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin-top:26px;
  border-radius:20px;
  background:rgba(255,255,255,.18);
}

.github-card--resize .github-work-icon{
  background:rgba(255,255,255,.42);
}

.github-work-icon svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.github-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:18px;
}

.github-card-actions a{
  padding:7px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}

.github-card--ocr .github-card-actions a,
.github-card--crop .github-card-actions a{
  color:var(--wet-asphalt);
  background:#fff;
}

.github-card--resize .github-card-actions a{
  color:var(--wet-asphalt);
  background:rgba(255,255,255,.66);
}

/* Q&A: add horizontal breathing room to A text */
.faq-answer p{
  margin:0 30px 20px;
}

.faq-answer blockquote{
  margin:0 30px 18px;
}

@media(max-width:1200px){
  .hero-firstline{font-size:.76em}
}

@media(max-width:1024px){
  .hero-firstline{font-size:.84em}
}

@media(max-width:768px){
  .hero-firstline{
    font-size:.72em;
    letter-spacing:-.075em;
  }

  .github-grid--three{
    grid-template-columns:1fr;
  }

  .faq-answer p{
    margin-left:20px;
    margin-right:20px;
  }

  .faq-answer blockquote{
    margin-left:20px;
    margin-right:20px;
  }
}

@media(max-width:480px){
  .hero-firstline{font-size:.67em}

  .problem-shift{
    left:20px;
    right:20px;
  }

  .faq-answer p{
    margin-left:16px;
    margin-right:16px;
  }

  .faq-answer blockquote{
    margin-left:16px;
    margin-right:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .problem-banner-tool{animation:none!important}
}


/* =========================================================
   N WORKS v5.5 / Section motion + Company contrast
========================================================= */

/* COMPANY: remove the saturated yellow wall / halation */
.company-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 12%,rgba(52,152,219,.08),transparent 24%),
    radial-gradient(circle at 92% 80%,rgba(26,188,156,.08),transparent 22%),
    var(--clouds);
  color:var(--wet-asphalt);
}

.company-section::before{
  content:"";
  position:absolute;
  left:-80px;
  bottom:-120px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:var(--sun-flower);
  opacity:.18;
  pointer-events:none;
}

.company-brand,
.company-table{
  position:relative;
  z-index:2;
}

.company-brand p{
  color:var(--peter-river);
}

.company-brand h2{
  color:var(--wet-asphalt);
}

.company-mark{
  color:#fff;
  background:var(--wet-asphalt);
  box-shadow:0 14px 28px rgba(44,62,80,.12);
}

.company-table{
  background:rgba(255,255,255,.64);
  border-radius:22px;
  padding:0 24px;
  backdrop-filter:blur(6px);
}

.company-table>div{
  border-color:rgba(52,73,94,.16);
}

.company-table dt{
  color:var(--asbestos);
}

.company-table dd{
  color:var(--wet-asphalt);
}

/* ---------------------------------------------------------
   Common heading choreography
--------------------------------------------------------- */
.section-title-motion{
  position:relative;
  overflow:visible;
}

.section-title-motion .section-label,
.section-title-motion h2,
.section-title-motion>p:last-child{
  will-change:transform,opacity,filter,clip-path;
}

/* Each pattern starts hidden until the section title enters viewport */
.motion-title-left:not(.is-title-active) .section-label{
  opacity:0;
  transform:translateX(-44px);
}
.motion-title-left:not(.is-title-active) h2{
  opacity:0;
  transform:translateX(-70px) rotate(-2deg);
}
.motion-title-left:not(.is-title-active)>p:last-child{
  opacity:0;
  transform:translateX(-30px);
}
.motion-title-left.is-title-active .section-label,
.motion-title-left.is-title-active h2,
.motion-title-left.is-title-active>p:last-child{
  opacity:1;
  transform:none;
}
.motion-title-left .section-label{transition:.55s var(--ease)}
.motion-title-left h2{transition:.82s var(--ease) .08s}
.motion-title-left>p:last-child{transition:.68s var(--ease) .18s}

/* WHAT WE DO — rises and expands */
.motion-title-rise:not(.is-title-active) .section-label{
  opacity:0;
  transform:translateY(22px);
}
.motion-title-rise:not(.is-title-active) h2{
  opacity:0;
  transform:translateY(58px) scale(.88);
  filter:blur(5px);
}
.motion-title-rise:not(.is-title-active)>p:last-child{
  opacity:0;
  transform:translateY(26px);
}
.motion-title-rise.is-title-active .section-label,
.motion-title-rise.is-title-active h2,
.motion-title-rise.is-title-active>p:last-child{
  opacity:1;
  transform:none;
  filter:none;
}
.motion-title-rise .section-label{transition:.5s var(--ease)}
.motion-title-rise h2{transition:.9s var(--ease) .06s}
.motion-title-rise>p:last-child{transition:.65s var(--ease) .2s}

/* TOOLS — comes in from the right with slight skew */
.motion-title-right:not(.is-title-active) .section-label{
  opacity:0;
  transform:translateX(50px);
}
.motion-title-right:not(.is-title-active) h2{
  opacity:0;
  transform:translateX(90px) skewX(-7deg);
}
.motion-title-right:not(.is-title-active)>p:last-child{
  opacity:0;
  transform:translateX(42px);
}
.motion-title-right.is-title-active .section-label,
.motion-title-right.is-title-active h2,
.motion-title-right.is-title-active>p:last-child{
  opacity:1;
  transform:none;
}
.motion-title-right .section-label{transition:.5s var(--ease)}
.motion-title-right h2{transition:.85s var(--ease) .08s}
.motion-title-right>p:last-child{transition:.68s var(--ease) .2s}

/* GITHUB — zoom / focus */
.motion-title-zoom:not(.is-title-active) .section-label{
  opacity:0;
  transform:scale(.72);
}
.motion-title-zoom:not(.is-title-active) h2{
  opacity:0;
  transform:scale(1.16);
  filter:blur(7px);
}
.motion-title-zoom:not(.is-title-active)>p:last-of-type,
.motion-title-zoom:not(.is-title-active) .github-profile-link{
  opacity:0;
  transform:translateY(24px);
}
.motion-title-zoom.is-title-active .section-label,
.motion-title-zoom.is-title-active h2,
.motion-title-zoom.is-title-active>p:last-of-type,
.motion-title-zoom.is-title-active .github-profile-link{
  opacity:1;
  transform:none;
  filter:none;
}
.motion-title-zoom .section-label{transition:.55s var(--ease)}
.motion-title-zoom h2{transition:.88s var(--ease) .07s}
.motion-title-zoom>p:last-of-type{transition:.62s var(--ease) .18s}
.motion-title-zoom .github-profile-link{transition:.62s var(--ease) .28s}

/* N WORKS STYLE — sticky heading receives a wipe / underline */
.motion-title-sticky::after{
  content:"";
  display:block;
  width:0;
  height:7px;
  margin-top:24px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--peter-river),var(--turquoise),var(--sun-flower),var(--amethyst));
  transition:width 1s var(--ease) .18s;
}
.motion-title-sticky:not(.is-title-active) h2{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateY(16px);
}
.motion-title-sticky:not(.is-title-active) .section-label{
  opacity:0;
  transform:translateY(-18px);
}
.motion-title-sticky.is-title-active h2{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transform:none;
}
.motion-title-sticky.is-title-active .section-label{
  opacity:1;
  transform:none;
}
.motion-title-sticky.is-title-active::after{width:82%}
.motion-title-sticky .section-label{transition:.5s var(--ease)}
.motion-title-sticky h2{transition:1s var(--ease) .06s}

/* Q&A — small rotational settle */
.motion-title-tilt:not(.is-title-active) .section-label{
  opacity:0;
  transform:translate(-28px,-14px) rotate(-8deg);
}
.motion-title-tilt:not(.is-title-active) h2{
  opacity:0;
  transform:translateY(34px) rotate(2.5deg);
}
.motion-title-tilt:not(.is-title-active)>p:last-child{
  opacity:0;
  transform:translateY(20px);
}
.motion-title-tilt.is-title-active .section-label,
.motion-title-tilt.is-title-active h2,
.motion-title-tilt.is-title-active>p:last-child{
  opacity:1;
  transform:none;
}
.motion-title-tilt .section-label{transition:.62s var(--ease)}
.motion-title-tilt h2{transition:.82s var(--ease) .08s}
.motion-title-tilt>p:last-child{transition:.62s var(--ease) .2s}

/* CONTACT — drops in with a soft blur */
.motion-title-drop:not(.is-title-active) .section-label{
  opacity:0;
  transform:translateY(-28px);
}
.motion-title-drop:not(.is-title-active) h2{
  opacity:0;
  transform:translateY(-54px) scale(.95);
  filter:blur(5px);
}
.motion-title-drop:not(.is-title-active)>p:last-child{
  opacity:0;
  transform:translateY(24px);
}
.motion-title-drop.is-title-active .section-label,
.motion-title-drop.is-title-active h2,
.motion-title-drop.is-title-active>p:last-child{
  opacity:1;
  transform:none;
  filter:none;
}
.motion-title-drop .section-label{transition:.55s var(--ease)}
.motion-title-drop h2{transition:.82s var(--ease) .07s}
.motion-title-drop>p:last-child{transition:.65s var(--ease) .18s}

/* Company title/table use a separate two-sided entrance */
.company-title-motion:not(.is-company-active){
  opacity:0;
  transform:translateX(-70px) rotate(-2deg);
}
.company-title-motion.is-company-active{
  opacity:1;
  transform:none;
}
.company-title-motion{
  transition:opacity .72s var(--ease),transform .85s var(--ease);
}

.company-table-motion:not(.is-company-active){
  opacity:0;
  transform:translateX(75px);
}
.company-table-motion.is-company-active{
  opacity:1;
  transform:none;
}
.company-table-motion{
  transition:opacity .72s var(--ease) .12s,transform .85s var(--ease) .12s;
}

/* ---------------------------------------------------------
   Section parallax / depth
   Existing JS already drives --motion-y / --motion-y-small.
--------------------------------------------------------- */
.problem-grid{
  translate:0 var(--motion-y-small-neg,0px);
  will-change:translate;
}

.service-scroller{
  translate:0 var(--motion-y-small,0px);
  will-change:translate;
}

.tools-section .project-list{
  translate:0 var(--motion-y-small-neg,0px);
  will-change:translate;
}

.github-grid{
  translate:0 var(--motion-y-small,0px);
  will-change:translate;
}

.faq-list{
  translate:0 var(--motion-y-small-neg,0px);
  will-change:translate;
}

.contact-form{
  translate:0 var(--motion-y-small,0px);
  will-change:translate;
}

.company-grid{
  translate:0 var(--motion-y-small-neg,0px);
  will-change:translate;
}

/* Subtle scale/opacity response as sections enter */
.js-motion-section{
  --section-focus:.96;
}

.js-motion-section .section-head{
  transform-origin:left center;
}

.js-motion-section.is-section-inview .section-head{
  opacity:1;
}

/* Mobile: retain movement but reduce travel */
@media(max-width:768px){
  .motion-title-left:not(.is-title-active) h2{transform:translateX(-38px)}
  .motion-title-right:not(.is-title-active) h2{transform:translateX(42px) skewX(-4deg)}
  .motion-title-rise:not(.is-title-active) h2{transform:translateY(36px) scale(.92)}
  .motion-title-drop:not(.is-title-active) h2{transform:translateY(-34px) scale(.97)}

  .problem-grid,
  .service-scroller,
  .tools-section .project-list,
  .github-grid,
  .faq-list,
  .contact-form,
  .company-grid{
    translate:0 var(--motion-y-small-neg,0px);
  }

  .company-table{
    padding:0 16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .section-title-motion *,
  .company-title-motion,
  .company-table-motion{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
  .motion-title-sticky::after{width:82%!important;transition:none!important}
  .problem-grid,
  .service-scroller,
  .tools-section .project-list,
  .github-grid,
  .faq-list,
  .contact-form,
  .company-grid{
    translate:none!important;
  }
}