:root{--ink:#0C0E12;--panel:#14171D;--panel-2:#1B1F27;--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.16);--text:#F2F1EC;--muted:#858E9C;--violet:#7C5CFF;--violet-soft:rgba(124,92,255,.14);--gold:#C9A24B;--green:#25C26E;--cyan:#4DD9C9;--coral:#FF5B4A;--maxw:1000px;--disp:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(900px circle at 20% 0%,rgba(124,92,255,.16),transparent 40%),radial-gradient(700px circle at 85% 8%,rgba(77,217,201,.1),transparent 36%),linear-gradient(180deg,#07080b,#0c0e12 55%,#08090d);color:var(--text);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:var(--violet);color:#fff}.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.12}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:15px;padding:14px 24px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,border-color .18s ease}.btn svg{flex:none}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--violet);color:#fff}.btn-ghost{border-color:var(--line-strong);color:var(--text)}.btn-ghost:hover{border-color:var(--text)}.btn-wa{background:#25D366;color:#06301A}header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(12,14,18,.72);border-bottom:1px solid var(--line)}.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 24px}.logo{display:flex;align-items:center;gap:11px}.nav-links{display:flex;gap:20px;align-items:center;font-size:14.5px}.nav-links a{opacity:.85}.nav-links a:hover{opacity:1;color:var(--cyan)}@media(max-width:640px){.nav-links a.hide-m{display:none}}.hero{padding:74px 0 46px;text-align:left}.eyebrow{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:8px}.eyebrow::before{content:"";width:22px;height:1px;background:var(--violet)}.hero h1{font-size:clamp(32px,5vw,52px);margin:18px 0 16px;max-width:20ch}.hero h1 em{font-style:italic;font-weight:500;color:var(--violet)}.hero p{font-size:18px;color:var(--muted);max-width:58ch;margin-bottom:26px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}.hero-trust{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}.hero-trust b{color:var(--text);font-family:var(--disp)}section.blk{padding:56px 0}.sec-h{max-width:640px;margin-bottom:34px}.sec-h h2{font-size:clamp(25px,3.4vw,36px);margin-bottom:10px}.sec-h p{color:var(--muted);font-size:16px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.g-card{background:linear-gradient(160deg,var(--panel),#0a0c10);border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:all .4s ease;position:relative;overflow:hidden;z-index:1}.g-card::before{content:"";position:absolute;inset:0;opacity:0;z-index:-1;transition:opacity .4s ease}.g-card:hover{transform:translateY(-5px)}.g-card:hover::before{opacity:1}.g-card .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;transition:transform .4s ease}.g-card:hover .ic{transform:scale(1.1) rotate(-5deg)}.g-card .ic svg{width:20px;height:20px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.g-card h3{font-size:16.5px;margin-bottom:7px}.g-card p{color:var(--muted);font-size:13.5px}@media(max-width:820px){.grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.grid{grid-template-columns:1fr}}.price-band{background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(77,217,201,.07));border:1px solid rgba(124,92,255,.35);border-radius:20px;padding:34px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.price-band .p-txt h3{font-size:22px;margin-bottom:6px}.price-band .p-txt p{color:var(--muted);font-size:14.5px}.price-band .p-num{font-family:var(--disp);font-size:38px;font-weight:700;color:#fff}.price-band .p-num small{font-size:14px;color:var(--muted);font-weight:500;display:block;margin-top:2px}details.faq{border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px;background:var(--panel)}details.faq summary{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}details.faq summary::-webkit-details-marker{display:none}details.faq summary::after{content:"+";color:var(--violet);font-weight:700}details.faq[open] summary::after{content:"–"}details.faq div{color:var(--muted);font-size:14.5px;padding-top:10px}.cta-final{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:42px 36px;text-align:center;position:relative;overflow:hidden}.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(480px circle at 50% -20%,rgba(124,92,255,.24),transparent 60%);pointer-events:none}.cta-final h2{font-size:26px;margin-bottom:10px;position:relative}.cta-final p{color:var(--muted);margin-bottom:24px;position:relative;max-width:52ch;margin-left:auto;margin-right:auto}.cta-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}.rel{border-top:1px solid var(--line);padding:34px 0 10px}.rel h3{font-family:var(--disp);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.rel a{display:flex;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-family:var(--disp);font-weight:500;margin-bottom:10px;transition:border-color .2s,transform .2s}.rel a:hover{border-color:var(--line-strong);transform:translateX(3px)}.rel a span{color:var(--violet)}footer{border-top:1px solid var(--line);padding:32px 0;text-align:center;color:var(--muted);font-size:13px;margin-top:40px}.foot-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}.foot-links a{font-size:14px;color:var(--muted)}.foot-links a:hover{color:var(--text)}.k1{--a:255,91,74}.k2{--a:255,144,64}.k3{--a:227,179,65}.k4{--a:168,207,69}.k5{--a:53,196,107}.k6{--a:125,232,176}.k7{--a:69,207,224}.k8{--a:77,160,245}.k9{--a:108,123,247}.k10{--a:155,92,255}.k11{--a:212,92,240}.k12{--a:255,95,158}.g-card.kx::before{background:radial-gradient(circle at top right,rgba(var(--a),.15),transparent 70%)}.g-card.kx:hover{border-color:rgba(var(--a),.42);box-shadow:0 12px 30px -10px rgba(var(--a),.28)}.g-card.kx .ic{background:rgba(var(--a),.16)}.g-card.kx .ic svg{stroke:rgb(var(--a))}@media (max-width:900px){*,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}header.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0c10;transform:translateZ(0);backface-visibility:hidden}.logo{position:relative;left:auto;right:auto;transform:none;overflow:hidden}.sc-tab,.mini,.sc-read,.post .cat,.featured .fcover .badge{backdrop-filter:none;-webkit-backdrop-filter:none}}[id]{scroll-margin-top:98px}@media (hover:none){.btn:hover,.card:hover,.g-card:hover,.sector:hover,.web-item:hover,.web-chip:hover,.ai-use:hover,.why-item:hover,.rev-card:hover,.post:hover,.ttile:hover .tbox,.sc-tab:hover,.sc-read:hover,.ft-social a:hover,.ft-contact a:hover,.nl-group a:hover,.ai-fab:hover{transform:none}.btn:active,.card:active,.g-card:active{transform:scale(.985)}}.wrap.wrap{padding-left:24px;padding-right:24px}@media(max-width:720px){.wrap.wrap{padding-left:18px;padding-right:18px}}
.service-page{ --service-accent-rgb: 124, 92, 255; --service-accent-2-rgb: 77, 217, 201; background: radial-gradient(900px circle at 82% 7%, rgba(var(--service-accent-rgb), .13), transparent 38%),
    radial-gradient(760px circle at 10% 24%, rgba(var(--service-accent-2-rgb), .07), transparent 38%),
    linear-gradient(180deg, #07090d 0%, #0b0e13 48%, #07090d 100%); }.service-graphic .logo,.service-cloud .logo{ position: relative; isolation: isolate; padding: 5px 8px; border-radius: 14px; }@media (max-width: 900px){.service-graphic .logo,.service-cloud .logo{ overflow: hidden; }}.service-hero-grid{ gap: clamp(38px, 5vw, 62px); }.service-page .service-hero-copy{ padding-left: 6px; }.service-page .service-hero p,.service-page .sec-h p,.service-page .g-card p,.service-page .process-step p,.service-page details.faq div{ text-wrap: pretty; }.service-page .sec-h{ max-width: 790px; margin-bottom: 36px; }.service-page .g-card{ padding: 29px 28px 27px; }.service-page .process-step{ padding-right: 27px; padding-left: 27px; }.service-page .price-band{ padding-right: 44px; padding-left: 44px; }.service-page .cta-final{ padding-right: 44px; padding-left: 44px; }.service-page .rel a{ padding-right: 20px; padding-left: 20px; }.service-graphic .sec-head{ grid-template-columns: minmax(0px, 0.92fr) minmax(0px, 1.08fr); gap: 30px; align-items: center; }.service-graphic .sec-head > p{ max-width: 54ch; }@media (max-width: 760px){.service-page .service-hero-copy{ padding-left: 0px; }.service-page .g-card{ padding: 25px 23px; }.service-page .price-band,.service-page .cta-final{ padding-right: 24px; padding-left: 24px; }.service-graphic .sec-head{ grid-template-columns: 1fr; gap: 16px; }}.service-web{ --service-accent-rgb: 124, 92, 255; --service-accent-2-rgb: 77, 217, 201; }.service-ai{ --service-accent-rgb: 77, 217, 201; --service-accent-2-rgb: 124, 92, 255; }.service-commerce{ --service-accent-rgb: 255, 91, 74; --service-accent-2-rgb: 201, 162, 75; }.service-seo{ --service-accent-rgb: 37, 194, 110; --service-accent-2-rgb: 77, 141, 245; }.service-graphic{ --service-accent-rgb: 244, 95, 208; --service-accent-2-rgb: 124, 92, 255; }.service-cloud{ --service-accent-rgb: 201, 162, 75; --service-accent-2-rgb: 77, 217, 201; }.service-page main{ overflow: hidden; }.service-page header.nav{ background: rgba(7, 9, 13, 0.8); border-color: rgba(255, 255, 255, 0.08); }.service-page .nav-in{ height: 78px; }.service-page .service-hero{ position: relative; max-width: 1180px; padding-top: 86px; padding-bottom: 36px; isolation: isolate; }.service-page .service-hero::before{ content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -320px; top: -340px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--service-accent-rgb), .16), transparent 68%); filter: blur(8px); pointer-events: none; }.service-hero-grid{ display: grid; grid-template-columns: minmax(0px, 1.08fr) minmax(350px, 0.82fr); align-items: center; gap: clamp(42px, 7vw, 84px); }.service-hero-copy{ min-width: 0px; }.service-page .service-hero .eyebrow{ color: rgb(156, 163, 175); }.service-page .service-hero .eyebrow::before{ display: none; }.service-page .service-hero h1{ max-width: 11.5ch; margin: 21px 0px 23px; color: rgb(244, 243, 239); font-size: clamp(45px, 5.7vw, 72px); font-weight: 600; line-height: 0.98; letter-spacing: -0.055em; text-wrap: balance; }.service-page .service-hero h1 em{ font-style: normal; font-weight: 600; color: rgb(var(--service-accent-rgb)); }.service-page .service-hero p{ max-width: 58ch; margin: 0px 0px 29px; color: rgb(174, 184, 200); font-size: 17px; line-height: 1.72; letter-spacing: -0.012em; text-wrap: pretty; }.service-page .service-hero .hero-actions{ margin: 0px; }.service-page .service-hero .btn-ghost{ background: rgba(255, 255, 255, 0.02); }.service-page .live-hint{ display: inline-flex; align-items: center; gap: 8px; margin: -7px 0px 18px; padding: 8px 11px; border: 1px solid rgba(var(--service-accent-rgb), .24); border-radius: 999px; background: rgba(var(--service-accent-rgb), .065); color: rgb(199, 213, 223); font: 500 12px var(--disp); }.service-page .live-hint::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--service-accent-rgb)); box-shadow: 0 0 16px rgba(var(--service-accent-rgb), .75); }.service-visual{ position: relative; min-height: 430px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; background: linear-gradient(145deg, rgba(var(--service-accent-rgb), .12), rgba(255, 255, 255, .02) 42%, rgba(7, 9, 13, .75)),
    #11151c; box-shadow: rgba(0, 0, 0, 0.95) 0px 46px 90px -54px, rgba(255, 255, 255, 0.04) 0px 1px inset; }.service-visual::before{ content: ""; position: absolute; inset: auto -20% -45% 5%; height: 75%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--service-accent-2-rgb), .16), transparent 64%); pointer-events: none; }.visual-top{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: rgb(220, 226, 235); font: 600 12px var(--disp); letter-spacing: 0.02em; }.visual-status{ display: inline-flex; align-items: center; gap: 7px; color: rgb(143, 154, 171); font: 500 12px var(--body); }.visual-status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--service-accent-rgb)); box-shadow: 0 0 12px rgba(var(--service-accent-rgb), .75); }.visual-window{ position: absolute; inset: 78px 34px 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(7, 9, 13, 0.72); box-shadow: rgba(0, 0, 0, 0.9) 0px 28px 60px -36px; }.web-window-bar{ display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }.web-window-bar i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }.web-window-hero{ padding: 34px 28px 20px; }.web-window-hero span{ display: block; width: 48%; height: 7px; margin-bottom: 13px; border-radius: 999px; background: rgba(var(--service-accent-rgb), .75); }.web-window-hero strong{ display: block; max-width: 9ch; color: rgb(243, 243, 239); font: 600 29px/1.04 var(--disp); letter-spacing: -0.04em; }.web-window-hero small{ display: block; max-width: 30ch; margin-top: 11px; color: rgb(120, 131, 149); font: 400 12px/1.5 var(--body); }.web-window-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0px 28px; }.web-window-cards i{ height: 58px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; background: linear-gradient(145deg, rgba(var(--service-accent-rgb), .11), rgba(255, 255, 255, .02)); }.web-phone{ position: absolute; right: 18px; bottom: 18px; width: 92px; height: 178px; padding: 9px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 22px; background: rgb(10, 12, 17); box-shadow: rgba(0, 0, 0, 0.9) 0px 20px 42px -22px; }.web-phone::before{ content: ""; display: block; width: 30px; height: 5px; margin: 0px auto 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); }.web-phone i{ display: block; height: 9px; margin: 8px 3px; border-radius: 999px; background: rgba(var(--service-accent-rgb), .26); }.web-phone i:nth-child(2){ width: 70%; }.web-phone i:nth-child(3){ width: 86%; background: rgba(255, 255, 255, 0.08); }.web-phone i:nth-child(4){ height: 52px; border-radius: 10px; background: rgba(255, 255, 255, 0.055); }.ai-chat-card{ position: absolute; inset: 80px 30px 30px; display: flex; flex-direction: column; gap: 13px; padding: 26px 22px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: rgba(7, 9, 13, 0.73); }.ai-msg{ max-width: 82%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: rgb(185, 195, 210); font: 400 12px/1.5 var(--body); }.ai-msg.user{ align-self: flex-end; border-color: rgba(var(--service-accent-rgb), .28); background: rgba(var(--service-accent-rgb), .14); color: rgb(231, 251, 248); }.ai-msg.bot{ background: rgba(255, 255, 255, 0.035); }.ai-msg.bot strong{ color: rgb(var(--service-accent-rgb)); }.ai-typing{ display: flex; align-items: center; gap: 5px; width: max-content; padding: 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); }.ai-typing i{ width: 5px; height: 5px; border-radius: 50%; background: rgb(105, 117, 136); }.shop-metric{ position: absolute; left: 28px; top: 82px; right: 28px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 10px; }.shop-total,.shop-orders{ padding: 20px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; background: rgba(7, 9, 13, 0.7); }.shop-total span,.shop-orders span{ display: block; color: rgb(132, 144, 162); font: 500 12px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; }.shop-total strong,.shop-orders strong{ display: block; margin-top: 8px; color: rgb(244, 242, 238); font: 600 27px var(--disp); }.shop-total strong{ color: rgb(var(--service-accent-rgb)); }.shop-list{ position: absolute; inset: 202px 28px 28px; display: grid; gap: 9px; }.shop-row{ display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: rgba(255, 255, 255, 0.024); }.shop-row i{ width: 42px; height: 34px; border-radius: 8px; background: linear-gradient(145deg, rgba(var(--service-accent-rgb), .35), rgba(var(--service-accent-2-rgb), .13)); }.shop-row span{ color: rgb(185, 194, 207); font: 500 12px var(--body); }.shop-row b{ color: rgb(115, 222, 161); font: 600 12px var(--disp); }.seo-search{ position: absolute; inset: 82px 28px auto; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(7, 9, 13, 0.78); color: rgb(203, 211, 223); font: 500 12px var(--body); }.seo-search::before{ content: ""; width: 13px; height: 13px; border: 2px solid rgb(119, 131, 150); border-radius: 50%; }.seo-rank-card{ position: absolute; inset: 150px 28px auto; padding: 18px; border: 1px solid rgba(var(--service-accent-rgb), .3); border-radius: 16px; background: rgba(7, 9, 13, 0.72); }.seo-rank{ float: right; padding: 6px 9px; border-radius: 999px; background: rgba(var(--service-accent-rgb), .14); color: rgb(var(--service-accent-rgb)); font: 700 12px var(--disp); }.seo-rank-card small{ color: rgb(112, 128, 148); font: 500 12px var(--body); }.seo-rank-card strong{ display: block; max-width: 25ch; margin: 7px 0px; color: rgb(116, 167, 255); font: 600 14px/1.35 var(--disp); }.seo-rank-card p{ margin: 0px; color: rgb(142, 154, 172); font-size: 12px; line-height: 1.5; }.seo-chart{ position: absolute; inset: 285px 28px 28px; display: flex; align-items: flex-end; gap: 9px; padding: 18px 16px 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; background: repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 34px), rgba(255, 255, 255, 0.02); }.seo-chart i{ flex: 1 1 0%; height: var(--h); min-height: 16px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, rgba(var(--service-accent-rgb), .9), rgba(var(--service-accent-rgb), .2)); }.service-page .service-hero .hero-trust{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 0px; margin-top: 54px; padding: 21px 0px 0px; border-top: 1px solid rgba(255, 255, 255, 0.094); color: rgb(119, 130, 149); }.service-page .service-hero .hero-trust span{ min-width: 0px; padding: 0px 22px; border-left: 1px solid rgba(255, 255, 255, 0.075); font-size: 12px; line-height: 1.55; }.service-page .service-hero .hero-trust span:first-child{ padding-left: 0px; border-left: 0px; }.service-page .service-hero .hero-trust b{ display: block; margin-bottom: 2px; color: rgb(237, 240, 244); font: 600 15px var(--disp); }.service-page section.blk{ max-width: 1180px; padding-top: 78px; padding-bottom: 78px; }.service-page .sec-h{ max-width: 720px; margin-bottom: 40px; }.service-page .sec-h::before{ content: attr(data-kicker); display: block; min-height: 14px; margin-bottom: 13px; color: rgb(var(--service-accent-rgb)); font: 600 12px var(--disp); letter-spacing: 0.16em; text-transform: uppercase; }.service-page .sec-h h2{ color: rgb(242, 241, 236); font-size: clamp(29px, 3.7vw, 43px); line-height: 1.06; letter-spacing: -0.038em; }.service-page .sec-h p{ margin-top: 13px; color: rgb(156, 168, 185); font-size: 16px; line-height: 1.68; }.service-page .grid{ gap: 16px; }.service-page .g-card{ min-height: 236px; padding: 25px 24px 23px; border-color: rgba(255, 255, 255, 0.086); border-radius: 19px; background: linear-gradient(155deg, rgba(255, 255, 255, 0.043), rgba(255, 255, 255, 0.01) 56%), rgb(13, 16, 21); }.service-page .g-card .ic{ width: 46px; height: 46px; margin-bottom: 25px; border-radius: 13px; }.service-page .g-card h3{ margin-bottom: 10px; color: rgb(240, 242, 245); font-size: 18px; }.service-page .g-card p{ color: rgb(143, 155, 173); font-size: 13.5px; line-height: 1.65; }.service-page .service-process{ position: relative; }.process-grid{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }.process-step{ min-width: 0px; padding: 26px 22px 28px; border-left: 1px solid rgba(255, 255, 255, 0.075); }.process-step:first-child{ padding-left: 0px; border-left: 0px; }.process-step .num{ display: block; margin-bottom: 29px; color: rgb(var(--service-accent-rgb)); font: 600 12px var(--disp); letter-spacing: 0.09em; }.process-step h3{ margin-bottom: 8px; color: rgb(241, 242, 245); font-size: 17px; }.process-step p{ color: rgb(132, 144, 161); font-size: 13px; line-height: 1.62; }.service-page .price-band{ position: relative; overflow: hidden; padding: 40px 38px; border-color: rgba(var(--service-accent-rgb), .26); border-radius: 24px; background: radial-gradient(520px circle at 85% 0%, rgba(var(--service-accent-rgb), .16), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014)); }.service-page .price-band::after{ content: "ÖLÇER / 2026"; position: absolute; right: 34px; top: 20px; color: rgba(255, 255, 255, 0.18); font: 600 12px var(--disp); letter-spacing: 0.18em; }.service-page .price-band .p-txt{ max-width: 700px; }.service-page .price-band .p-txt h3{ font-size: 25px; }.service-page .price-band .p-txt p{ max-width: 64ch; color: rgb(154, 166, 183); line-height: 1.65; }.service-page .price-band .p-num{ color: rgb(var(--service-accent-rgb)); font-size: 34px; text-align: right; }.service-page details.faq{ padding: 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.09); border-image: none; border-radius: 0px; background: transparent; }.service-page details.faq summary{ padding: 21px 3px; font-size: 16px; }.service-page details.faq summary::after{ color: rgb(var(--service-accent-rgb)); }.service-page details.faq div{ max-width: 74ch; padding: 0px 3px 22px; color: rgb(149, 161, 178); line-height: 1.7; }.service-page .cta-final{ padding: 52px 38px; border-color: rgba(var(--service-accent-rgb), .2); border-radius: 26px; background: radial-gradient(580px circle at 50% -25%, rgba(var(--service-accent-rgb), .24), transparent 64%),
    linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
    #0d1015; margin-top: 54px !important; }.service-page .cta-final h2{ font-size: clamp(27px, 3vw, 36px); letter-spacing: -0.035em; }.service-page .cta-final p{ color: rgb(156, 168, 185); line-height: 1.7; }.service-page .rel{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; padding-top: 31px; margin-top: 54px !important; }.service-page .rel h3{ grid-column: 1 / -1; margin-bottom: 3px; color: rgb(121, 133, 151); }.service-page .rel a{ min-height: 66px; align-items: center; margin: 0px; padding: 17px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.02); }.service-page .rel a span{ color: rgb(var(--service-accent-rgb)); }.service-page footer{ margin-top: 30px; background: rgba(5, 7, 10, 0.48); }.service-graphic .hero,.service-cloud .hero{ padding-top: 82px; }.service-graphic .hero-grid,.service-cloud .hero-grid{ gap: clamp(40px, 6vw, 78px); }.service-graphic .hero-notes,.service-cloud .hero-notes{ border-top: 1px solid rgba(255, 255, 255, 0.09); border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(90deg, rgba(var(--service-accent-rgb), .055), transparent); }.service-graphic .hero-notes span,.service-cloud .hero-notes span{ border-color: rgba(255, 255, 255, 0.07); }.service-graphic .cta,.service-cloud .cta{ border-color: rgba(var(--service-accent-rgb), .22); background: radial-gradient(560px circle at 50% -30%, rgba(var(--service-accent-rgb), .2), transparent 64%),
    #11141a; }@media (max-width: 900px){.service-hero-grid{ grid-template-columns: 1fr; gap: 42px; }.service-page .service-hero h1{ max-width: 13ch; }.service-visual{ width: min(100%, 560px); min-height: 400px; margin: 0px auto; }.service-page .service-hero .hero-trust{ grid-template-columns: repeat(2, minmax(0px, 1fr)); row-gap: 22px; }.service-page .service-hero .hero-trust span:nth-child(2n+1){ padding-left: 0px; border-left: 0px; }.process-grid{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }.process-step:nth-child(3){ padding-left: 0px; border-left: 0px; }}@media (max-width: 560px){.service-page .service-hero{ padding-top: 54px; }.service-page .service-hero h1{ font-size: clamp(40px, 12vw, 56px); }.service-page .service-hero p{ font-size: 15.5px; }.service-visual{ min-height: 400px; border-radius: 22px; }.visual-window,.ai-chat-card{ left: 18px; right: 18px; }.service-page .service-hero .hero-trust{ margin-top: 38px; }.service-page .service-hero .hero-trust span{ padding: 0px 12px; }.service-page section.blk{ padding-top: 60px; padding-bottom: 60px; }.service-page .g-card{ min-height: 0px; }.process-grid{ grid-template-columns: 1fr; }.process-step,.process-step:nth-child(3){ padding: 22px 0px; border-left: 0px; border-top: 1px solid rgba(255, 255, 255, 0.07); }.process-step:first-child{ border-top: 0px; }.process-step .num{ margin-bottom: 15px; }.service-page .price-band{ padding: 34px 24px; }.service-page .price-band .p-num{ text-align: left; }.service-page .rel{ grid-template-columns: 1fr; }}
/* Hizmet başlıkları: konuya göre ortak premium vurgu sistemi */
.service-page {
  --service-accent: #7c5cff;
  --service-accent-hi: #c2b8ff;
  --service-heading-accent: var(--service-accent);
}

.service-page.service-ai {
  --service-accent: #4dd9c9;
  --service-accent-hi: #b9fff5;
}

.service-page.service-seo {
  --service-accent: #63d394;
  --service-accent-hi: #c4f5d5;
}

.service-page.service-commerce {
  --service-accent: #ff5b4a;
  --service-accent-hi: #ffc0b8;
}

.service-page.service-graphic {
  --service-accent: #ec4aa5;
  --service-accent-hi: #ffb1dc;
}

.service-page.service-cloud {
  --service-accent: #c9a24b;
  --service-accent-hi: #ffe4a1;
  --service-heading-accent: #4dd9c9;
}

.service-page .hero .eyebrow {
  color: var(--service-accent);
}

.service-page .hero .eyebrow::before {
  background: var(--service-accent);
}

.service-page .hero h1 em {
  display: inline-block;
  background: linear-gradient(105deg, var(--service-heading-accent), var(--service-accent-hi) 46%, var(--service-heading-accent));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: serviceAccentShine 7s linear infinite;
}

@keyframes serviceAccentShine {
  to { background-position: 220% center; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page .hero h1 em { animation: none; }
}

/* Ölçer Web Tasarım — unified brand assets */
.logo,
.premium-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
  min-width: 0;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}

.logo::before,
.logo::after,
.premium-footer-logo::before,
.premium-footer-logo::after {
  display: none;
  content: none;
  animation: none;
}

.logo .brand-wordmark,
.premium-footer-logo .brand-wordmark {
  display: block;
  width: 158px;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: none;
  transform: none;
}

.blog-footer-inner .logo .brand-wordmark,
footer .premium-footer-logo .brand-wordmark {
  width: 178px;
}

.brand-wordmark--standalone {
  display: block;
  width: min(260px, 76vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 560px) {
  .logo .brand-wordmark,
  .premium-footer-logo .brand-wordmark {
    width: 142px;
  }

  .blog-footer-inner .logo .brand-wordmark,
  footer .premium-footer-logo .brand-wordmark {
    width: 160px;
  }
}
/* Keep the pointer-following hero ambience covering the section at every edge. */
.hero > .ambient {
  inset: -32px;
}

.hero {
  overflow: clip;
}

@supports not (overflow: clip) {
  .hero {
    overflow: hidden;
  }
}

/* Remove the decorative gradient rules below homepage section headings. */
.sec-head h2::after {
  content: none;
  display: none;
}

/* Give homepage section labels a distinct, non-purple editorial tone. */
body.home-page#top .eyebrow,
body.home-page#top .eyebrow.cy {
  color: #b9c8d8;
  font-family: var(--disp);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 0 18px rgba(77, 217, 201, 0.18);
}

/* Extend the same editorial tone to homepage proof and supporting labels. */
body.home-page#top .process-note > span,
body.home-page#top .reference-proof span,
body.home-page#top .about-code,
body.home-page#top .about-footer > span,
body.home-page#top .contact-premium .cta-actions small {
  color: #b9c8d8;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 18px rgba(77, 217, 201, 0.16);
}

/* Supporting explanations stay comfortable to read while gaining contrast. */
body.home-page#top .tech-heading > p,
body.home-page#top .plans-premium .plan-note,
body.home-page#top .faq-premium .sec-head p {
  color: #aebdcb;
  font-weight: 500;
}

body.home-page#top .plans-premium .plan-note strong {
  color: #d8e1e9;
  font-weight: 700;
}

/* Shared professional system for all primary service pages */
.service-page {
  --service-accent: #7ed9ce;
  --service-accent-2: #9fb1c6;
  --service-accent-rgb: 126, 217, 206;
  --service-surface: rgba(18, 22, 30, 0.92);
  --service-surface-strong: rgba(22, 27, 36, 0.97);
  --service-line: rgba(255, 255, 255, 0.09);
  --service-line-strong: rgba(185, 200, 216, 0.2);
  --service-copy: #afbdcc;
  --service-soft: #8e9dad;
  --maxw: 1120px;
  background:
    radial-gradient(880px circle at 84% 0%, rgba(var(--service-accent-rgb), 0.085), transparent 44%),
    radial-gradient(720px circle at 5% 25%, rgba(75, 112, 170, 0.065), transparent 42%),
    linear-gradient(180deg, #080a0e 0%, #0b0e13 50%, #080a0e 100%);
}

.service-web {
  --service-accent: #8f79ef;
  --service-accent-2: #60d9cd;
  --service-accent-rgb: 126, 109, 232;
}

.service-ai {
  --service-accent: #68d9ce;
  --service-accent-2: #8d83e9;
  --service-accent-rgb: 77, 217, 201;
}

.service-commerce {
  --service-accent: #e38963;
  --service-accent-2: #d9b567;
  --service-accent-rgb: 227, 137, 99;
}

.service-seo {
  --service-accent: #6ed399;
  --service-accent-2: #75d9ce;
  --service-accent-rgb: 110, 211, 153;
}

.service-graphic {
  --service-accent: #b49ae8;
  --service-accent-2: #71d8cf;
  --service-accent-rgb: 180, 154, 232;
}

.service-cloud {
  --service-accent: #d9b565;
  --service-accent-2: #76d8cf;
  --service-accent-rgb: 217, 181, 101;
}

.service-page header.nav {
  background: rgba(8, 10, 14, 0.87);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.14);
}

.service-page .nav-in {
  width: 100%;
  max-width: var(--maxw);
  height: 74px;
}

.service-page .nav-links {
  color: #a8b4c1;
  font-size: 13px;
}

.service-page .nav-links > a:not(.btn):hover {
  color: #edf0f2;
}

body.service-page#top .eyebrow,
body.service-page#top .kicker {
  color: #b9c8d8;
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 0 18px rgba(77, 217, 201, 0.13);
}

.service-page .eyebrow::before {
  display: none;
}

.service-page .service-hero,
.service-graphic .hero,
.service-cloud .hero {
  position: relative;
  overflow: visible;
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(66px, 7vw, 94px);
}

.service-page .service-hero::after,
.service-graphic .hero::after,
.service-cloud .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 24px;
  left: 24px;
  height: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.service-page .service-hero-grid,
.service-graphic .hero-grid,
.service-cloud .hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(350px, 0.84fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

.service-page .service-hero-copy,
.service-graphic .hero-copy,
.service-cloud .hero-copy {
  min-width: 0;
}

.service-page .service-hero h1,
.service-graphic .hero h1,
.service-cloud .hero h1 {
  max-width: 13ch;
  margin: 20px 0 23px;
  color: #f0f2f3;
  font: 600 clamp(47px, 5.4vw, 70px) / 0.99 var(--disp);
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.service-page .service-hero h1 em,
.service-graphic .hero h1 em,
.service-cloud .hero h1 em {
  background: linear-gradient(90deg, var(--service-accent) 0%, var(--service-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: inherit;
}

.service-page .service-hero p,
.service-graphic .hero-copy > p,
.service-cloud .hero-copy > p {
  max-width: 61ch;
  margin: 0;
  color: var(--service-copy);
  font-size: 17px;
  line-height: 1.76;
}

.service-page .hero-actions,
.service-page .actions {
  gap: 11px;
  margin-top: 29px;
}

.service-page .hero-actions .btn,
.service-page .actions .btn,
.service-page .cta-acts .btn,
.service-page .cta-actions .btn {
  min-height: 49px;
  padding: 13px 20px;
  border-radius: 10px;
}

.service-page .btn-primary {
  border: 1px solid rgba(var(--service-accent-rgb), 0.7);
  background: var(--service-accent);
  color: #07110f;
  box-shadow: 0 14px 34px -22px rgba(var(--service-accent-rgb), 0.85);
}

.service-page .btn-ghost {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
  color: #e1e6ea;
}

.service-page .btn-ghost:hover {
  border-color: rgba(var(--service-accent-rgb), 0.5);
}

.service-page .service-visual,
.service-graphic .design-board,
.service-cloud .cloud-visual {
  min-height: 420px;
  border-color: var(--service-line-strong);
  border-radius: 23px;
  background:
    radial-gradient(280px circle at 78% 12%, rgba(var(--service-accent-rgb), 0.13), transparent 68%),
    linear-gradient(155deg, rgba(24, 30, 39, 0.97), rgba(10, 13, 18, 0.98));
  box-shadow: 0 34px 80px -44px rgba(0, 0, 0, 0.96), inset 0 1px rgba(255, 255, 255, 0.04);
}

/* The AI demo contains four complete messages and a typing state. Give that
   conversation its own vertical rhythm so the final response never escapes
   the browser frame. */
.service-ai .service-visual-ai {
  min-height: 480px;
}

.service-ai .ai-chat-card {
  inset: 80px 30px 28px;
  gap: 11px;
  padding: 22px 20px;
  overflow: hidden;
}

.service-ai .ai-msg,
.service-ai .ai-typing {
  flex: 0 0 auto;
}

.service-ai .ai-msg {
  padding: 10px 13px;
  line-height: 1.45;
}

.service-page .visual-top,
.service-page .visual-label,
.service-graphic .board-label {
  color: #8998a9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.service-page .visual-status {
  color: #83d9b2;
}

.service-commerce .service-visual::after,
.service-seo .service-visual::after {
  position: absolute;
  right: 18px;
  bottom: 17px;
  z-index: 4;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.78);
  color: #8090a1;
  font: 700 12px var(--disp);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.service-commerce .service-visual::after {
  content: "Temsili operasyon ekranı";
}

.service-seo .service-visual::after {
  content: "Temsili rapor görünümü";
}

.service-page .service-hero .hero-trust,
.service-graphic .hero-notes,
.service-cloud .hero-notes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-graphic .hero-notes,
.service-cloud .hero-notes {
  grid-template-columns: repeat(3, 1fr);
}

.service-page .service-hero .hero-trust span,
.service-graphic .hero-notes span,
.service-cloud .hero-notes span {
  min-height: 46px;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.085);
  color: #7e8c9d;
  font-size: 12px;
  line-height: 1.45;
}

.service-page .service-hero .hero-trust span:first-child,
.service-graphic .hero-notes span:first-child,
.service-cloud .hero-notes span:first-child {
  padding-left: 0;
  border-left: 0;
}

.service-page .service-hero .hero-trust b {
  margin-bottom: 4px;
  color: #cfd6dd;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.service-graphic .hero-notes span::before,
.service-cloud .hero-notes span::before {
  width: 5px;
  height: 5px;
  background: var(--service-accent-2);
}

.service-page section.blk {
  padding-top: clamp(72px, 8vw, 104px);
  padding-bottom: clamp(72px, 8vw, 104px);
}

.service-page section.blk + section.blk {
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.service-page .sec-h,
.service-page .sec-head {
  max-width: none;
  margin-bottom: 40px;
}

.service-page .sec-h::before,
.service-page .sec-h::after {
  display: none;
}

.service-page .sec-h[data-kicker]::before {
  content: attr(data-kicker);
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin-bottom: 13px;
  color: #b9c8d8;
  background: none;
  font: 700 12px var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.service-page .sec-h h2,
.service-page .sec-head h2 {
  max-width: 18ch;
  margin: 0 0 12px;
  color: #edf0f2;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.service-page .sec-h p,
.service-page .sec-head > p {
  max-width: 66ch;
  color: var(--service-copy);
  font-size: 15px;
  line-height: 1.73;
}

.service-graphic .sec-head,
.service-cloud .sec-head {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
  gap: clamp(40px, 7vw, 88px);
}

.service-page .grid,
.service-cloud .grid {
  gap: 13px;
}

.service-page .g-card,
.service-cloud .service {
  min-height: 290px;
  padding: 24px;
  border-color: rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(22, 27, 36, 0.95), rgba(10, 13, 18, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.service-page .g-card:hover,
.service-cloud .service:hover {
  border-color: rgba(var(--service-accent-rgb), 0.36);
  box-shadow: 0 25px 48px -36px rgba(0, 0, 0, 0.96), inset 0 1px rgba(255, 255, 255, 0.035);
}

.service-page .g-card:hover .ic {
  transform: translateY(-2px);
}

.service-page .g-card .ic,
.service-cloud .service .ic {
  width: 46px;
  height: 46px;
  margin-bottom: 25px;
  border: 1px solid rgba(var(--service-accent-rgb), 0.24);
  border-radius: 12px;
  background: rgba(var(--service-accent-rgb), 0.075);
  color: var(--service-accent);
}

.service-page .g-card .ic svg,
.service-cloud .service .ic svg {
  stroke: currentColor;
}

.service-page .g-card h3,
.service-cloud .service h3 {
  margin-bottom: 10px;
  color: #e9edf0;
  font-size: 19px;
  line-height: 1.2;
}

.service-page .g-card p,
.service-cloud .service p {
  color: #9eacbb;
  font-size: 13.5px;
  line-height: 1.68;
}

.service-cloud .service small {
  color: var(--service-accent);
  font-size: 12px;
}

.service-graphic .services-grid {
  gap: 13px;
  align-items: start;
}

.service-graphic details.service-card {
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(22, 27, 36, 0.95), rgba(10, 13, 18, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.service-graphic details.service-card:hover {
  border-color: rgba(var(--service-accent-rgb), 0.34);
}

.service-graphic details.service-card summary {
  padding: 24px;
}

.service-graphic .service-no > span:first-child {
  color: #8391a2;
  font-size: 12px;
  letter-spacing: 0.13em;
}

.service-graphic .service-icon {
  border-color: rgba(var(--service-accent-rgb), 0.24);
  background: rgba(var(--service-accent-rgb), 0.075);
  color: var(--service-accent);
}

.service-graphic details.service-card h3 {
  color: #e9edf0;
}

.service-graphic details.service-card .intro,
.service-graphic details.service-card .service-body {
  color: #9eacbb;
}

.service-graphic details.service-card .service-body {
  border-top-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.012);
}

.service-page .service-process {
  padding-top: clamp(72px, 8vw, 104px);
}

.service-page .process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.service-page .process-step {
  min-height: 248px;
  padding: 27px 24px 24px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0;
  background: transparent;
}

.service-page .process-step:first-child {
  border-left: 0;
}

.service-page .process-step .num {
  color: var(--service-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.service-page .process-step h3 {
  margin: 42px 0 11px;
  color: #e9edf0;
  font-size: 19px;
}

.service-page .process-step p {
  color: #94a3b3;
  font-size: 13px;
  line-height: 1.65;
}

.service-page .price-band {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-color: rgba(var(--service-accent-rgb), 0.22);
  border-radius: 17px;
  background:
    radial-gradient(360px circle at 100% 0%, rgba(var(--service-accent-rgb), 0.1), transparent 70%),
    linear-gradient(145deg, rgba(21, 27, 35, 0.97), rgba(10, 13, 18, 0.98));
  box-shadow: none;
}

.service-page .price-band::after {
  display: none;
}

.service-page .price-band .p-txt h3 {
  color: #edf0f2;
  font-size: 22px;
}

.service-page .price-band .p-txt p {
  color: #9eacbb;
}

.service-page .price-band .p-num {
  color: #eef1f3;
  font-size: 36px;
}

.service-page details.faq {
  margin-bottom: 9px;
  padding: 18px 20px;
  border-color: rgba(255, 255, 255, 0.085);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(20, 25, 33, 0.9), rgba(10, 13, 18, 0.95));
}

.service-page details.faq[open] {
  border-color: rgba(var(--service-accent-rgb), 0.25);
}

.service-page details.faq summary {
  min-height: 34px;
  align-items: center;
  color: #dce2e7;
  font-size: 14.5px;
}

.service-page details.faq summary::after {
  color: var(--service-accent);
}

.service-page details.faq div {
  max-width: 82ch;
  color: #9eacbb;
  line-height: 1.7;
}

.service-page .cta-final,
.service-graphic .cta,
.service-cloud .cta {
  padding: clamp(42px, 6vw, 62px) clamp(24px, 6vw, 66px);
  border-color: rgba(var(--service-accent-rgb), 0.2);
  border-radius: 20px;
  background:
    radial-gradient(480px circle at 50% -35%, rgba(var(--service-accent-rgb), 0.13), transparent 67%),
    linear-gradient(145deg, rgba(21, 27, 35, 0.97), rgba(10, 13, 18, 0.98));
  box-shadow: none;
}

.service-page .cta-final::before,
.service-graphic .cta::before,
.service-cloud .cta::before {
  display: none;
}

.service-page .cta-final h2,
.service-graphic .cta h2,
.service-cloud .cta h2 {
  color: #eef1f3;
  font-size: clamp(27px, 3.4vw, 38px);
  letter-spacing: -0.045em;
}

.service-page .cta-final p,
.service-graphic .cta p,
.service-cloud .cta p {
  color: #a8b6c5;
  line-height: 1.7;
}

.service-page .rel {
  padding-top: 38px;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.service-page .rel h3 {
  color: #8f9eaf;
  font-size: 12px;
  font-weight: 700;
}

.service-page .rel a {
  padding: 18px 19px;
  border-color: rgba(255, 255, 255, 0.085);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(20, 25, 33, 0.88), rgba(10, 13, 18, 0.94));
  color: #d8dfe5;
  font-size: 13px;
}

.service-page .rel a:hover {
  border-color: rgba(var(--service-accent-rgb), 0.32);
  background: rgba(var(--service-accent-rgb), 0.035);
  transform: translateY(-1px);
}

.service-page .rel a span {
  color: var(--service-accent);
}

.service-page footer {
  margin-top: 20px;
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .service-page .service-hero-grid,
  .service-graphic .hero-grid,
  .service-cloud .hero-grid {
    grid-template-columns: 1fr;
  }

  .service-page .service-visual,
  .service-graphic .design-board,
  .service-cloud .cloud-visual {
    max-width: 650px;
  }

  .service-page .service-hero .hero-trust {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-page .service-hero .hero-trust span:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    padding-top: 15px;
  }

  .service-page .service-hero .hero-trust span:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    padding-top: 15px;
  }

  .service-graphic .sec-head,
  .service-cloud .sec-head {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .service-page .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-page .process-step:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.085);
  }

  .service-page .process-step:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.085);
  }
}

@media (max-width: 620px) {
  .service-page .service-hero,
  .service-graphic .hero,
  .service-cloud .hero {
    padding-top: 54px;
    padding-bottom: 55px;
  }

  .service-page .service-hero h1,
  .service-graphic .hero h1,
  .service-cloud .hero h1 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .service-page .hero-actions .btn,
  .service-page .actions .btn,
  .service-page .cta-acts .btn,
  .service-page .cta-actions .btn {
    width: 100%;
  }

  .service-page .service-visual,
  .service-graphic .design-board,
  .service-cloud .cloud-visual {
    min-height: 330px;
    border-radius: 18px;
  }

  .service-ai .service-visual-ai {
    min-height: 500px;
  }

  .service-ai .ai-chat-card {
    inset: 72px 14px 18px;
    gap: 10px;
    padding: 18px 14px;
  }

  .service-ai .ai-msg {
    max-width: 88%;
    padding: 9px 11px;
    font-size: 11.5px;
  }

  .service-page .service-hero .hero-trust,
  .service-graphic .hero-notes,
  .service-cloud .hero-notes {
    grid-template-columns: 1fr;
  }

  .service-page .service-hero .hero-trust span,
  .service-graphic .hero-notes span,
  .service-cloud .hero-notes span,
  .service-page .service-hero .hero-trust span:nth-child(3),
  .service-page .service-hero .hero-trust span:nth-child(4) {
    min-height: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    border-left: 0;
  }

  .service-page .service-hero .hero-trust span:first-child,
  .service-graphic .hero-notes span:first-child,
  .service-cloud .hero-notes span:first-child {
    border-top: 0;
  }

  .service-page section.blk {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .service-page .grid,
  .service-cloud .grid {
    grid-template-columns: 1fr;
  }

  .service-page .g-card,
  .service-cloud .service {
    min-height: 270px;
  }

  .service-page .process-grid {
    grid-template-columns: 1fr;
  }

  .service-page .process-step,
  .service-page .process-step:nth-child(3),
  .service-page .process-step:nth-child(4) {
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.085);
    border-left: 0;
  }

  .service-page .process-step:first-child {
    border-top: 0;
  }

  .service-page .process-step h3 {
    margin-top: 24px;
  }

  .service-page .price-band {
    padding: 27px 21px;
  }

  .service-page .cta-final,
  .service-graphic .cta,
  .service-cloud .cta {
    padding: 36px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-page .g-card,
  .service-page .rel a,
  .service-page .btn {
    transition: none;
  }
}

/* Ortak erişilebilirlik katmanı: klavye odağı ve hareket tercihleri. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid #4dd9c9;
  outline-offset:3px;
}

.skip-link{
  background:#4dd9c9;
  border-radius:0 0 10px 0;
  color:#071017;
  font-weight:700;
  left:0;
  padding:.75rem 1rem;
  position:fixed;
  top:0;
  transform:translateY(-120%);
  transition:transform .16s ease-out;
  z-index:10000;
}
.skip-link:focus-visible{transform:translateY(0)}

.nav-links a[aria-current="page"],.nav-cta a[aria-current="page"]{
  color:#fff;
  text-decoration-color:#4dd9c9;
  text-decoration-thickness:2px;
  text-underline-offset:.45em;
}

/* WCAG AA: beyaz metinle 4.5:1 üzerinde kontrast. */
.btn-primary{background:#6b4be3}
.btn-primary:hover{background:#7558e8}
.ows-cta .c-q,.mobile-cta .mc-quote{background:#5637ce}
.demo.restoran .d-btn{color:#1a0805}
.mm-p{color:#c7cfdb;font-size:11px}
.mm-btn{background:#6b4be3;font-size:11px}
.phone .mm-btn{font-size:10px}

/* Dokunmatik kontrollerde en az 44x44 px hedef alanı. */
:where(.menu-btn,.rev-nav,.tab,.sc-tab,.ai-teaser-close,.ai-quick button){
  align-items:center;
  display:inline-flex;
  justify-content:center;
  min-height:44px;
  min-width:44px;
}

.premium-footer a,.blog-footer-inner a{
  align-items:center;
  display:inline-flex;
  min-height:44px;
  min-width:44px;
}

.premium-footer-bottom{font-size:13px}

@media (max-width:900px){
  .nav-links a{
    align-items:center;
    display:flex;
    min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

.service-page .rel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.service-page .rel h3 { grid-column: 1 / -1; }
.service-page .rel a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 118px;
  margin: 0;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.service-page .rel a b {
  display: block;
  font: 500 17px/1.25 Outfit, "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
}
.service-page .rel a em {
  display: block;
  margin-top: 6px;
  color: #8b95a6;
  font: 400 13px/1.45 Inter, sans-serif;
  font-style: normal;
}
.service-page .rel a span { margin-top: 16px; }
@media (max-width: 800px) {
  .service-page .rel { grid-template-columns: 1fr; }
}