:root{
    --forest:#17352f;
    --forest-soft:#244a42;
    --terracotta:#d8663b;
    --terracotta-soft:#fbe8df;
    --sun:#f5b742;
    --cream:#fbf6ee;
    --paper:#fffdf9;
    --white:#ffffff;
    --text:#25312d;
    --muted:#68756f;
    --line:#e5ddd1;
    --green:#159a68;
    --shadow:0 28px 75px rgba(23,53,47,.14);
    --radius:25px
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:Arial,"Helvetica Neue",sans-serif;
    line-height:1.65
}
button,input,textarea{font:inherit}
button{cursor:pointer}
.sol-shell{width:min(1180px,calc(100% - 36px));margin:auto}
.sol-skip{
    position:fixed;
    top:-70px;
    left:18px;
    z-index:99999;
    padding:10px 14px;
    border-radius:8px;
    background:var(--white);
    color:var(--forest)
}
.sol-skip:focus{top:18px}

/* Header */
.sol-header{
    position:sticky;
    top:0;
    z-index:90;
    border-bottom:1px solid var(--line);
    background:rgba(255,253,249,.95);
    backdrop-filter:blur(14px)
}
.sol-header__inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}
.sol-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:var(--forest);
    text-decoration:none;
    font-weight:900
}
.sol-brand__symbol{
    position:relative;
    width:38px;
    height:38px;
    display:block;
    border-radius:50%;
    background:var(--terracotta)
}
.sol-brand__symbol i,
.sol-brand__symbol b{
    position:absolute;
    left:50%;
    bottom:50%;
    width:2px;
    border-radius:99px;
    background:var(--white);
    transform-origin:bottom
}
.sol-brand__symbol i{height:10px;transform:translateX(-50%) rotate(18deg)}
.sol-brand__symbol b{height:14px;transform:translateX(-50%) rotate(118deg)}
.sol-brand__symbol em{
    position:absolute;
    top:50%;
    left:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--sun);
    transform:translate(-50%,-50%)
}
.sol-navigation{display:flex;align-items:center;gap:25px}
.sol-navigation a{color:#52615b;text-decoration:none;font-weight:750}
.sol-navigation a:hover{color:var(--forest)}
.sol-menu-button{display:none;border:0;background:transparent}
.sol-menu-button span{display:block;width:25px;height:2px;margin:6px 0;background:var(--forest)}

/* Hero */
.sol-hero{
    padding:76px 0 56px;
    background:
        radial-gradient(circle at 86% 3%,rgba(245,183,66,.18),transparent 28%),
        linear-gradient(180deg,var(--cream),var(--paper))
}
.sol-hero__layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(285px,.5fr);
    gap:68px;
    align-items:end
}
.sol-kicker,
.sol-section-title p{
    margin:0;
    color:var(--terracotta);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.16em
}
.sol-hero h1{
    margin:12px 0 22px;
    color:var(--forest);
    font-size:clamp(3.8rem,9vw,7.5rem);
    line-height:.9;
    letter-spacing:-.073em
}
.sol-hero__copy>p:last-child{
    max-width:710px;
    margin:0;
    color:var(--muted);
    font-size:1.17rem
}
.sol-live{
    padding:24px;
    border-radius:19px;
    background:var(--forest);
    color:var(--white);
    box-shadow:var(--shadow)
}
.sol-live span,
.sol-live small{display:block;color:#d4e2dd}
.sol-live span{
    margin-bottom:5px;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
}
.sol-live strong{
    display:block;
    font-size:clamp(2.3rem,5vw,3.8rem);
    line-height:1.05;
    font-variant-numeric:tabular-nums
}

/* Clock */
.sol-tool{padding:22px 0 84px}
.sol-clock{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow)
}
.sol-clock__toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--line);
    background:#fffbf6
}
.sol-tabs{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border-radius:13px;
    background:#f1ebe3
}
.sol-tabs button{
    border:0;
    border-radius:10px;
    padding:10px 18px;
    background:transparent;
    color:var(--muted);
    font-weight:850
}
.sol-tabs button.is-active{
    background:var(--white);
    color:var(--forest);
    box-shadow:0 4px 12px rgba(23,53,47,.08)
}
.sol-format{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    color:#56645e;
    font-size:.88rem;
    font-weight:800;
    white-space:nowrap
}
.sol-format input{position:absolute;opacity:0;pointer-events:none}
.sol-format>span{
    position:relative;
    width:44px;
    height:25px;
    border-radius:99px;
    background:#d8cfc3;
    transition:.2s
}
.sol-format>span i{
    position:absolute;
    top:3px;
    left:3px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--white);
    transition:.2s
}
.sol-format input:checked+span{background:var(--terracotta)}
.sol-format input:checked+span i{transform:translateX(19px)}
.sol-fullscreen{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--white);
    color:var(--forest)
}
.sol-fullscreen svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.9}
.sol-clock__stage{
    min-height:510px;
    display:grid;
    place-items:center;
    padding:48px
}
.sol-panel{width:100%}
.sol-panel[hidden]{display:none!important}
.sol-digital{text-align:center}
.sol-digital time{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:.15em;
    white-space:nowrap
}
.sol-digital time span{
    color:var(--forest);
    font-size:clamp(4.8rem,11vw,10.4rem);
    line-height:.88;
    font-weight:800;
    letter-spacing:-.07em;
    font-variant-numeric:tabular-nums
}
.sol-digital time em{
    padding-bottom:.25em;
    color:var(--terracotta);
    font-size:1.4rem;
    font-style:normal;
    font-weight:900
}
.sol-digital>p{
    margin:25px 0 14px;
    color:var(--forest-soft);
    font-size:1.24rem;
    font-weight:700
}
.sol-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.sol-meta span{
    padding:7px 11px;
    border-radius:99px;
    background:var(--terracotta-soft);
    color:#8f3d23;
    font-size:.84rem
}

/* Analog */
.sol-analog{text-align:center}
.sol-face{
    position:relative;
    width:min(390px,76vw);
    aspect-ratio:1;
    margin:auto;
    border:3px solid var(--forest);
    border-radius:50%;
    background:radial-gradient(circle at center,#fff 0 68%,#fbf3e7 69% 100%);
    box-shadow:inset 0 0 0 10px #fffaf4,0 20px 45px rgba(23,53,47,.13)
}
.sol-hour{
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    margin:-15px;
    display:grid;
    place-items:center;
    color:var(--forest);
    font-family:Georgia,serif;
    font-size:1.05rem;
    font-weight:700
}
.sol-hour--1{transform:rotate(30deg) translateY(-163px) rotate(-30deg)}
.sol-hour--2{transform:rotate(60deg) translateY(-163px) rotate(-60deg)}
.sol-hour--3{transform:rotate(90deg) translateY(-163px) rotate(-90deg)}
.sol-hour--4{transform:rotate(120deg) translateY(-163px) rotate(-120deg)}
.sol-hour--5{transform:rotate(150deg) translateY(-163px) rotate(-150deg)}
.sol-hour--6{transform:rotate(180deg) translateY(-163px) rotate(-180deg)}
.sol-hour--7{transform:rotate(210deg) translateY(-163px) rotate(-210deg)}
.sol-hour--8{transform:rotate(240deg) translateY(-163px) rotate(-240deg)}
.sol-hour--9{transform:rotate(270deg) translateY(-163px) rotate(-270deg)}
.sol-hour--10{transform:rotate(300deg) translateY(-163px) rotate(-300deg)}
.sol-hour--11{transform:rotate(330deg) translateY(-163px) rotate(-330deg)}
.sol-hour--12{transform:rotate(0deg) translateY(-163px) rotate(0deg)}
.sol-hand{position:absolute;left:50%;bottom:50%;border-radius:99px;transform-origin:bottom}
.sol-hand--hour{width:8px;height:25%;background:var(--forest)}
.sol-hand--minute{width:6px;height:34%;background:var(--terracotta)}
.sol-hand--second{width:2px;height:40%;background:var(--sun)}
.sol-center{
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--sun);
    box-shadow:0 0 0 4px var(--forest);
    transform:translate(-50%,-50%)
}
.sol-analog__info{margin-top:22px}
.sol-analog__info strong{display:block;font-size:1.45rem;font-variant-numeric:tabular-nums}
.sol-analog__info span{color:var(--muted)}
.sol-clock__status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 20px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.88rem
}
.sol-clock__status span{display:flex;align-items:center;gap:8px}
.sol-clock__status span i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.sol-clock__status button{border:0;background:transparent;color:var(--terracotta);font-weight:850}

/* Homepage lower */
.sol-benefits,.sol-content,.sol-faq{padding:72px 0}
.sol-section-title{max-width:760px;margin-bottom:28px}
.sol-section-title h2{
    margin:7px 0;
    color:var(--forest);
    font-size:clamp(2.1rem,4.7vw,3.8rem);
    line-height:1.05;
    letter-spacing:-.05em
}
.sol-benefit-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px
}
.sol-benefit-grid article{
    min-height:180px;
    padding:25px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--white)
}
.sol-benefit-grid article:nth-child(2),
.sol-benefit-grid article:nth-child(3){
    background:var(--forest);
    color:var(--white)
}
.sol-benefit-grid h3{margin:0 0 8px}
.sol-benefit-grid p{margin:0;color:var(--muted)}
.sol-benefit-grid article:nth-child(2) p,
.sol-benefit-grid article:nth-child(3) p{color:#d4e2dd}
.sol-prose{
    max-width:930px;
    margin:auto;
    padding:clamp(28px,5vw,56px);
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--white)
}
.sol-prose h2{
    margin:1.65em 0 .5em;
    color:var(--forest);
    font-size:2rem;
    line-height:1.2;
    letter-spacing:-.025em
}
.sol-prose h2:first-child{margin-top:0}
.sol-prose p,.sol-prose li{color:#55625d}
.sol-prose a{color:var(--terracotta)}
.sol-faq__list{max-width:930px}
.sol-faq details,.sol-side-faq details{
    margin:10px 0;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--white);
    padding:17px 19px
}
.sol-faq summary,.sol-side-faq summary{
    display:flex;
    justify-content:space-between;
    gap:15px;
    cursor:pointer;
    font-weight:850
}
.sol-faq details p,.sol-side-faq details p{color:var(--muted)}

/* Static pages */
.sol-page-hero{padding:64px 0 32px;color:var(--white);background:var(--forest)}
.sol-breadcrumbs{display:flex;gap:8px;margin-bottom:25px;color:#c8d8d2}
.sol-breadcrumbs a{color:var(--sun);text-decoration:none}
.sol-page-hero h1{
    margin:10px 0 16px;
    max-width:900px;
    font-size:clamp(3rem,7vw,5.6rem);
    line-height:.94;
    letter-spacing:-.06em
}
.sol-page-hero__intro{max-width:760px;color:#d8e6e1;font-size:1.08rem}
.sol-document{padding:48px 0 88px}
.sol-document__grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start}
.sol-side-faq{position:sticky;top:95px}
.sol-contact{display:grid;gap:16px;margin-top:28px}
.sol-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sol-contact label{display:grid;gap:7px;font-weight:800}
.sol-contact input,.sol-contact textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fffaf4;
    padding:12px
}
.sol-primary{
    justify-self:start;
    border:0;
    border-radius:10px;
    background:var(--terracotta);
    color:var(--white);
    padding:12px 17px;
    font-weight:850
}
.hp-field{position:absolute;left:-9999px}
.sol-alert{padding:13px;border-radius:10px}
.sol-alert.is-success{background:#dcfae6;color:#05603a}
.sol-alert.is-error{background:#fee4e2;color:#912018}

/* Footer */
.sol-footer{padding:52px 0;background:var(--forest);color:var(--white)}
.sol-brand--footer{color:var(--white)}
.sol-footer__grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:36px}
.sol-footer p{color:#c8d8d2}
.sol-footer__links{display:grid;gap:8px}
.sol-footer__links a{color:#f7fbf9;text-decoration:none}
.sol-footer__note{text-align:right}

/* Fullscreen */
.sol-clock:fullscreen,.sol-clock.is-screen-mode{
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--white)
}
.sol-clock.is-screen-mode{position:fixed;inset:0;z-index:99999}
.sol-lock{overflow:hidden!important}
.sol-clock:fullscreen .sol-clock__stage,
.sol-clock.is-screen-mode .sol-clock__stage{min-height:0}
.sol-clock:fullscreen .sol-digital time span,
.sol-clock.is-screen-mode .sol-digital time span{font-size:clamp(7rem,17vw,16rem)}
.sol-clock:fullscreen .sol-face,
.sol-clock.is-screen-mode .sol-face{width:min(68vh,68vw,720px)}

/* Responsive */
@media(max-width:920px){
    .sol-hero__layout,.sol-document__grid,.sol-footer__grid{grid-template-columns:1fr}
    .sol-live{max-width:430px}
    .sol-side-faq{position:static}
    .sol-footer__note{text-align:left}
}
@media(max-width:720px){
    .sol-menu-button{display:block}
    .sol-navigation{
        display:none;
        position:absolute;
        top:72px;
        left:18px;
        right:18px;
        flex-direction:column;
        align-items:stretch;
        padding:16px;
        border:1px solid var(--line);
        border-radius:14px;
        background:var(--white);
        box-shadow:var(--shadow)
    }
    .sol-navigation.is-open{display:flex}
    .sol-clock__toolbar{gap:9px;padding:12px}
    .sol-tabs{flex:1;min-width:0}
    .sol-tabs button{flex:1;min-width:0;padding:10px 8px;font-size:.86rem}
    .sol-format{gap:6px;font-size:.78rem}
    .sol-fullscreen{width:40px;height:40px;flex-basis:40px}
    .sol-clock__stage{padding:38px 18px}
    .sol-contact__row{grid-template-columns:1fr}
}
@media(max-width:520px){
    .sol-shell{width:min(100% - 20px,1180px)}
    .sol-hero{padding:52px 0 40px}
    .sol-hero h1{font-size:clamp(3.2rem,18vw,5rem)}
    .sol-format b{display:none}
    .sol-format>span{width:38px;height:22px}
    .sol-format>span i{width:16px;height:16px}
    .sol-format input:checked+span i{transform:translateX(16px)}
    .sol-fullscreen{width:38px;height:38px;flex-basis:38px}
    .sol-digital time span{font-size:clamp(3.3rem,18vw,5.2rem)}
    .sol-digital time em{font-size:1rem}
    .sol-benefit-grid{grid-template-columns:1fr}
    .sol-clock__status{align-items:flex-start;flex-direction:column}
    .sol-face{width:min(310px,82vw)}
    .sol-hour--1{transform:rotate(30deg) translateY(-128px) rotate(-30deg)}
    .sol-hour--2{transform:rotate(60deg) translateY(-128px) rotate(-60deg)}
    .sol-hour--3{transform:rotate(90deg) translateY(-128px) rotate(-90deg)}
    .sol-hour--4{transform:rotate(120deg) translateY(-128px) rotate(-120deg)}
    .sol-hour--5{transform:rotate(150deg) translateY(-128px) rotate(-150deg)}
    .sol-hour--6{transform:rotate(180deg) translateY(-128px) rotate(-180deg)}
    .sol-hour--7{transform:rotate(210deg) translateY(-128px) rotate(-210deg)}
    .sol-hour--8{transform:rotate(240deg) translateY(-128px) rotate(-240deg)}
    .sol-hour--9{transform:rotate(270deg) translateY(-128px) rotate(-270deg)}
    .sol-hour--10{transform:rotate(300deg) translateY(-128px) rotate(-300deg)}
    .sol-hour--11{transform:rotate(330deg) translateY(-128px) rotate(-330deg)}
    .sol-hour--12{transform:rotate(0deg) translateY(-128px) rotate(0deg)}
    .sol-clock.is-screen-mode .sol-clock__status,
    .sol-clock:fullscreen .sol-clock__status{display:none}
}
@supports(padding:max(0px)){
    .sol-clock.is-screen-mode{
        padding-top:env(safe-area-inset-top);
        padding-right:env(safe-area-inset-right);
        padding-bottom:env(safe-area-inset-bottom);
        padding-left:env(safe-area-inset-left)
    }
}